Comment faire en sorte qu'un élément DIV occupe la hauteur de page restante après un autre DIV ?

Occuper la hauteur restante de la page avec des éléments DIV

Dans le développement Web, il est souvent nécessaire d'avoir un élément qui ajuste automatiquement sa hauteur pour remplir la l'espace restant sur la page. Dans ce cas, la question consiste à faire en sorte que le deuxième DIV (#div2) occupe la hauteur restante après avoir pris en compte le premier DIV (#div1).

Pour y parvenir, un positionnement absolu CSS est utilisé :

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

Avec un positionnement absolu, #div2 est retiré du flux normal de la page et sa position est déterminée par rapport à son ancêtre positionné le plus proche (#div1).

• haut : 50px : Spécifie la distance entre le haut de #div1 et #div2.
• bottom : 0 : Garantit que #div2 se développe verticalement pour remplir l'espace restant jusqu'au bas du page.

Cette approche permet à #div2 d'ajuster dynamiquement sa hauteur en fonction de la hauteur de la page, garantissant qu'elle occupe tout l'espace restant en dessous de #div1.

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!