Comment faire en sorte qu'un élément Div occupe la hauteur restante d'une page ?

Occupation de la hauteur restante pour les éléments Div

Dans la conception Web, vous pouvez rencontrer des situations dans lesquelles vous devez faire en sorte qu'un élément div occupe le reste hauteur de la page. Considérez ce scénario : vous avez deux divs avec le code suivant :

<div>

Comment faire en sorte que div2 occupe la hauteur restante de la page ?

Solution : positionnement absolu

Pour y parvenir, vous pouvez utiliser le positionnement absolu avec le CSS suivant :

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

Dans ce code :

• Div1 a une hauteur fixe de 50px et s'étend sur toute la largeur de la page.
• Div2 est positionné de manière absolue avec sa marge supérieure définie sur 50px (la hauteur de div1) et sa marge inférieure définie sur 0, ce qui lui fait occuper 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!