Comment faire en sorte qu'un div occupe la hauteur restante d'une page en HTML et CSS ?

Comment faire en sorte que la div occupe la hauteur restante en HTML et CSS

En HTML, il peut être difficile d'obtenir une mise en page spécifique dans laquelle une div doit occuper la hauteur restante. hauteur restante de la page. Considérons une situation avec deux div :

<div>

Le but est de faire en sorte que #div2 remplisse la hauteur restante de la page. Voici une solution utilisant le 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 */
}

Dans ce code, #div1 reçoit une hauteur fixe de 50px, tandis que #div2 est positionné de manière absolue et fait pour occuper l'espace restant. La propriété top est définie sur 50px, ce qui correspond à la hauteur de #div1. La propriété bottom est définie sur 0, indiquant que #div2 doit être ancré au bas de son parent, qui est la page elle-même dans ce cas. Ce faisant, #div2 s'étirera dynamiquement pour occuper la hauteur restante de la page.

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!