91 votes

Richard avatar

Faire en sorte que la div occupe 100 % de la hauteur du corps, moins la hauteur fixe de l'en-tête et du pied de page.

Demandé el 22 de Février, 2013
Quand la question a-t-elle été
179548 affichage
Nombre de visites la question a
3 Réponses
Nombre de réponses aux questions
Résolu
Situation réelle de la question

D'après mes recherches, il s'agit d'une question CSS tout à fait classique, mais je ne trouve pas de réponse définitive - c'est donc StackOverflow.

Comment faire pour qu'une div de contenu prenne 100 % de la hauteur du corps, moins la hauteur prise par un en-tête et un pied de page de hauteur fixe ?

<body>
  <header>title etc</header>
  <div id="content">body content</div>
  <footer>copyright etc</footer>
</body>

//CSS
html, body { 
  height: 100%;
}
header { 
  height: 50px;
}
footer { 
  height: 50px;
}
#content { 
  height: 100% of the body height, minus header & footer
}

J'aimerais utiliser du CSS pur et que la réponse soit inattaquable par tous les navigateurs.

Demandé el 22 de Février, 2013 par Richard

Réponses

Trop de publicités?

0voto

Jefferson Henrique C. Soares avatar
Jefferson Henrique C. Soares Points 367

Vous pouvez utiliser la propriété css Taille de la boîte .

#content { 
    height: 100%;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
    padding-top: 50px;
    margin-top: -50px;
    padding-bottom: 50px;
    margin-bottom: -50px;
}

Voir le JsFiddle .

Répondu el 22 de Février, 2013 par Jefferson Henrique C. Soares (367 Points )

0voto

mti2935 avatar
mti2935 Points 2753

Cette question a été assez bien répondue, mais je me permets d'ajouter une solution en javascript. Il suffit de donner à l'élément que vous voulez "développer" l'id footerspacerdiv et ce snippet javascript développera cette div jusqu'à ce que la page prenne toute la hauteur de la fenêtre du navigateur.

Son fonctionnement est basé sur l'observation que, lorsqu'une page est inférieure à la hauteur totale de la fenêtre du navigateur, document.body.scrollHeight est égal à document.body.clientHeight. La boucle while augmente la hauteur de footerspacerdiv jusqu'à ce que document.body.scrollHeight soit supérieur à document.body.clientHeight. À ce stade, footerspacerdiv sera en fait trop grande d'un pixel, et le navigateur affichera une barre de défilement verticale. Ainsi, la dernière ligne du script réduit la hauteur de l'image de footerspacerdiv d'un pixel pour que la hauteur de la page corresponde exactement à la hauteur de la fenêtre du navigateur.

En plaçant footerspacerdiv juste au-dessus du "pied de page", ce script peut être utilisé pour "pousser le pied de page" vers le bas de la page, de sorte que sur les pages courtes, le pied de page soit au même niveau que le bas de la fenêtre du navigateur.

<script>    
//expand footerspacer div so that footer goes to bottom of page on short pages        
  var objSpacerDiv=document.getElementById('footerspacer');          
  var bresize=0;   

  while(document.body.scrollHeight<=document.body.clientHeight) {
    objSpacerDiv.style.height=(objSpacerDiv.clientHeight+1)+"px";
    bresize=1;
  }             
  if(bresize) { objSpacerDiv.style.height=(objSpacerDiv.clientHeight-1)+"px"; }               
 </script>
Répondu el 14 de Novembre, 2014 par mti2935 (2753 Points )

0voto

AmadeusDrZaius avatar
AmadeusDrZaius Points 768

Voici une solution qui n'utilise pas de marges négatives ou de calc . Exécutez l'extrait ci-dessous pour voir le résultat final.

Explication

Nous donnons à l'en-tête et au pied de page une hauteur fixe de 30px et les positionner absolument en haut et en bas, respectivement. Pour éviter que le contenu ne tombe en dessous, nous utilisons deux classes : below-header et above-footer pour remplir la div au-dessus et au-dessous avec 30px .

Tout le contenu est enveloppé dans un position: relative de manière à ce que l'en-tête et le pied de page se trouvent en haut et en bas de la balise contenu et non la fenêtre.

Nous utilisons les classes fit-to-parent et min-fit-to-parent pour que le contenu remplisse la page. Nous obtenons ainsi un pied de page collant qui est au moins aussi bas que la fenêtre, mais qui est caché si le contenu est plus long que la fenêtre.

Dans l'en-tête et le pied de page, nous utilisons la balise display: table et display: table-cell pour donner à l'en-tête et au pied de page un peu de rembourrage vertical sans perturber la qualité de rétrécissement de la page. (Si on leur donne un véritable rembourrage, la hauteur totale de la page risque d'être supérieure à 100% qui fait apparaître une barre de défilement alors qu'elle n'est pas vraiment nécessaire).

.fit-parent {
    height: 100%;
    margin: 0;
    padding: 0;
}
.min-fit-parent {
    min-height: 100%;
    margin: 0;
    padding: 0;
}
.below-header {
    padding-top: 30px;
}
.above-footer {
    padding-bottom: 30px;
}
.header {
    position: absolute;
    top: 0;
    height: 30px;
    width: 100%;
}
.footer {
    position: absolute;
    bottom: 0;
    height: 30px;
    width: 100%;
}

/* helper classes */

.padding-lr-small {
    padding: 0 5px;
}
.relative {
    position: relative;
}
.auto-scroll {
  overflow: auto;
}
/* these two classes work together to create vertical centering */
.valign-outer {
    display: table;
}
.valign-inner {
    display: table-cell;
    vertical-align: middle;
}

<html class='fit-parent'>
  <body class='fit-parent'>
<div class='min-fit-parent auto-scroll relative' style='background-color: lightblue'>
<div class='header valign-outer' style='background-color: black; color: white;'>
        <div class='valign-inner padding-lr-small'>
            My webpage
        </div>
    </div>
    <div class='fit-parent above-footer below-header'>
        <div class='fit-parent' id='main-inner'>
          Lorem ipsum doloris finding dory Lorem ipsum doloris finding
          dory Lorem ipsum doloris finding dory Lorem ipsum doloris
          finding dory Lorem ipsum doloris finding dory Lorem ipsum
          doloris finding dory Lorem ipsum doloris finding dory Lorem
          ipsum doloris finding dory Lorem ipsum doloris finding dory
          Lorem ipsum doloris finding dory Lorem ipsum doloris finding
          dory Lorem ipsum doloris finding dory Lorem ipsum doloris
          finding dory Lorem ipsum doloris finding dory Lorem ipsum
          doloris finding dory Lorem ipsum doloris finding dory Lorem
          ipsum doloris finding dory Lorem ipsum doloris finding dory
          Lorem ipsum doloris finding dory Lorem ipsum doloris finding
          dory Lorem ipsum doloris finding dory Lorem ipsum doloris
          finding dory Lorem ipsum doloris finding dory Lorem ipsum
          doloris finding dory Lorem ipsum doloris finding dory Lorem
          ipsum doloris finding dory Lorem ipsum doloris finding dory
          Lorem ipsum doloris finding dory Lorem ipsum doloris finding
          dory Lorem ipsum doloris finding dory Lorem ipsum doloris
          finding dory Lorem ipsum doloris finding dory Lorem ipsum
          doloris finding dory Lorem ipsum doloris finding dory Lorem
          ipsum doloris finding dory Lorem ipsum doloris finding dory
          Lorem ipsum doloris finding dory Lorem ipsum doloris finding
          dory Lorem ipsum doloris finding dory Lorem ipsum doloris
          finding dory Lorem ipsum doloris finding dory Lorem ipsum
          doloris finding dory Lorem ipsum doloris finding dory Lorem
          ipsum doloris finding dory Lorem ipsum doloris finding dory
          Lorem ipsum doloris finding dory Lorem ipsum doloris finding
          dory Lorem ipsum doloris finding dory Lorem ipsum doloris
          finding dory Lorem ipsum doloris finding dory Lorem ipsum
          doloris finding dory Lorem ipsum doloris finding dory Lorem
          ipsum doloris finding dory Lorem ipsum doloris finding dory
          Lorem ipsum doloris finding dory Lorem ipsum doloris finding
          dory Lorem ipsum doloris finding dory Lorem ipsum doloris
          finding dory Lorem ipsum doloris finding dory Lorem ipsum
          doloris finding dory Lorem ipsum doloris finding dory Lorem
          ipsum doloris finding dory Lorem ipsum doloris finding dory
        </div>
    </div>
    <div class='footer valign-outer' style='background-color: white'>
        <div class='valign-inner padding-lr-small'>
            &copy; 2005 Old Web Design
        </div>
    </div>
</div>
    </body>
  </html>
Répondu el 10 de Février, 2015 par AmadeusDrZaius (768 Points )

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

Yandex
X