Est-ce que DIV remplit le reste de la page verticalement?

Question

J'ai une application Google Maps qui occupe la majeure partie de la page. Cependant, je dois réserver la bande d'espace la plus haute pour une barre de menus. Comment faire en sorte que la carte div remplisse automatiquement son espace vertical? height: 100% ne fonctionne pas car la barre du haut poussera la carte au-delà du bas de la page.

 +--------------------------------+
|      top bar  (n units tall)   |
|================================|
|              ^                 |
|              |                 |
|             div                |
|     (100%-n units tall)        |
|              |                 |
|              v                 |
+--------------------------------+
 

Answer 1

Vous pouvez utiliser le positionnement absolu.

HTML

<div id="content">
    <div id="header">
        Header
    </div>
    This is where the content starts.
</div>

CSS

BODY
{
    margin: 0;
    padding: 0;
}
#content
{
    border: 3px solid #971111;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: #DDD;
    padding-top: 85px;
}
#header
{
    border: 2px solid #279895;
    background-color: #FFF;
    height: 75px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
}

En positionnant #content absolument et en spécifiant le haut, droite, bas, gauche et de propriétés, vous obtenez un div de prendre la totalité de la fenêtre d'affichage.

Ensuite, vous définissez padding-top sur #content être >= à la hauteur de l' #header.

Enfin, placez #header à l'intérieur d' #content et la position absolument (spécification de haut, à gauche, à droite, et la hauteur).

Je ne suis pas sûr de savoir comment navigateur convivial c'est. Découvrez cet article sur A List Apart pour plus d'informations.

Answer 2

La façon de le faire, apparemment, consiste à utiliser JavaScript pour surveiller les événements onload et onresize et à redimensionner par programme la div de remplissage comme suit:

Utilisation de jQuery:

 function resize() {
    $("#bottom").height($(document).height() - $('#top').height());
}
 

Utilisation de JavaScript simple:

 function resize() {
    document.getElementById("bottom").style.height = (document.body.clientHeight - headerHeight) + "px";
}
 

Éditez: et liez-les ensuite à l'objet window .

Answer 3

Une autre solution pas donné utilise CSS3 plutôt que de javascript. Il y a un calc() fonction qui peut être utilisée pour faire la même chose:

HTML

<div id="content">
    <div id="header">
        Header
    </div>
    <div id="bottom">
        Bottom
    </div>
</div>

CSS3

#content {
    height: 300px;
    border-style: solid;
    border-color: blue;
    box-sizing: border-box;
}
#header {
    background-color: red;
    height: 30px;
}
#bottom {
    height: calc(100% - 30px);
    background-color: green;
}

Voici le jsfiddle

Vous pouvez aussi rechercher dans l'aide de l' box-sizing: border-box style de l'intérieur de la divs ce qui permet de se débarrasser des problèmes de rembourrage et les frontières piquer à l'extérieur du parent divs.

Answer 4

Si vous calculez la position de la page de l'élément div, vous pouvez le faire sans connaître l'élément d'en-tête:

 function resize() {
    var el = $("#bottom");
    el.height($(document).height() - el.offset().top);
}
 

Answer 5

Je vous recommande d'essayer jquery-mise en page du plugin. Vous verrez un tas de démos et exemples sur le lien.

Je ne sais pas si vous êtes familier avec les concepts de JQuery ou de certains autres helper Javascript cadre, à l'instar Prototype.js ou Mootools , mais c'est un vital idée d'utiliser l'un d'eux. Ils sont cacher la plupart du navigateur liés à des astuces de programmation et ils ont un certain nombre de extension utile pour l'INTERFACE utilisateur, de manipulation du DOM, etc.