Réglez le bas à 100 % de sa propre hauteur

Question

Je souhaite configurer un élément de manière à ce qu'il soit masqué de la vue page et que son haut touche juste le bas de la page (l'élément est hors de vue). Je le fais d'abord botttom: -66px;' lorsque la hauteur de l'élément est constante de 66 pixels. Mais maintenant, j'en ai besoin pour gérer des éléments de n'importe quelle taille.

Si je le fais bottom: -100%;, cela le définit à 100 % de la taille du parent. Comment puis-je le régler à -100 % de sa propre hauteur.

P粉005105443 · Answer

Vous recherchez "position:fixed”和“transform:translateY(100%);". Cela vous permet de déplacer le div à 100 % hors de la fenêtre, quelle que soit sa hauteur.

Exemple :

div {
  position: fixed;
  bottom: 0px;
  left: 0px;
  width: 100%;
  height: 40px;
  background-color: red;
  color: #fff;
  transform: translateY(100%);
}