Comment faire en sorte qu'un div occupe la hauteur restante de la page ?

Obtenir une occupation optimale de la hauteur des divisions

Lorsque vous travaillez avec des mises en page Web, il est souvent nécessaire qu'une div occupe la hauteur restante de la page. Prenons le cas suivant : deux divs, l'un de hauteur fixe, et l'autre destiné à remplir l'espace restant.

<div>

Pour s'assurer que div2 occupe la hauteur restante de la page, une solution efficace est de employer un positionnement absolu :

#div1 {
    width: 100%;
    height: 50px;
    background-color: red; /* Development Only */
}
#div2 {
    width: 100%;
    position: absolute;
    top: 50px;
    bottom: 0;
    background-color: blue; /* Development Only */
}

Avec cette approche, div1 conserve sa hauteur fixe, tandis que div2 est positionné de manière absolue, en commençant par le bas de div1 et en occupant l'espace vertical restant jusqu'au bas de la page, remplissant efficacement la hauteur restante.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!