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é
179547 affichage
Nombre de visites la question a
5 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?

67voto

Pete avatar
Pete Points 12054

Cette version fonctionnera dans tous les derniers navigateurs et ie8 si vous avez le script de modernizr (si ce n'est pas le cas, changez simplement header et footer en div s) :

Violon

html,
body {
  min-height: 100%;
  padding: 0;
  margin: 0;
}

#wrapper {
  padding: 50px 0;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

#content {
  min-height: 100%;
  background-color: green;
}

header {
  margin-top: -50px;
  height: 50px;
  background-color: red;
}

footer {
  margin-bottom: -50px;
  height: 50px;
  background-color: red;
}

p {
  margin: 0;
  padding: 0 0 1em 0;
}

<div id="wrapper">
  <header>dfs</header>
  <div id="content">
  </div>
  <footer>sdf</footer>
</div>

Défilement avec contenu : Violon

Répondu el 22 de Février, 2013 par Pete (12054 Points )

40voto

agriboz avatar
agriboz Points 1691

S'il ne s'agit pas d'une solution multi-navigateurs, vous pouvez utiliser l'option calc(expression) pour y parvenir.

html, body { 
 height: 100%;
}
header {        
 height: 50px;
 background-color: tomato
}

#content { 
 height: -moz-calc(100% - 100px); /* Firefox */
 height: -webkit-calc(100% - 100px); /* Chrome, Safari */
 height: calc(100% - 100px); /* IE9+ and future browsers */
 background-color: yellow 
}
footer { 
 height: 50px;
 background-color: grey;
}

Exemple chez JsFiddle

Si vous souhaitez en savoir plus sur calc(expression) il est préférable de visiter cette site.

Répondu el 22 de Février, 2013 par agriboz (1691 Points )

32voto

Matt L avatar
Matt L Points 512

Il s'agit toujours du premier résultat de Google lorsque j'essaie de trouver une réponse à cette question. Je n'avais pas besoin de prendre en charge les anciens navigateurs dans mon projet et j'ai l'impression d'avoir trouvé une meilleure solution, plus simple, dans flex-box . L'extrait CSS ci-dessous est tout ce qui est nécessaire.

J'ai également montré comment faire défiler le contenu principal si la hauteur de l'écran est trop petite.

html,
body {
  height: 100%;
  display: flex;
  flex-direction: column;
}
header {
  min-height: 60px;
}
main {
  flex-grow: 1;
  overflow: auto;
}
footer {
  min-height: 30px;
}

<body style="margin: 0px; font-family: Helvetica; font-size: 18px;">
  <header style="background-color: lightsteelblue; padding: 2px;">Hello</header>
  <main style="overflow: auto; background-color: lightgrey; padding: 2px;">
    <article style="height: 400px;">
      Goodbye
    </article>
  </main>
  <footer style="background-color: lightsteelblue; padding: 2px;">I don't know why you say, "Goodbye"; I say, "Hello."</footer>
</body>
Répondu el 16 de Juin, 2015 par Matt L (512 Points )

19voto

Eric Warnke avatar
Eric Warnke Points 199

La nouvelle méthode moderne consiste à calculer la hauteur verticale en soustrayant la hauteur de l'en-tête et du pied de page de la hauteur verticale de la fenêtre de visualisation.

//CSS
header { 
  height: 50px;
}
footer { 
  height: 50px;
}
#content { 
  height: calc(100vh - 50px - 50px);
}
Répondu el 23 de Avril, 2015 par Eric Warnke (199 Points )

2voto

Alik Elzin - kilaka avatar
Alik Elzin - kilaka Points 4694

Essayer de calculer l'en-tête et le pied de page n'est pas une bonne chose :( Un design devrait être simple, auto-explicatif. Tout simplement facile. Les calculs sont juste... pas faciles. Pas facile pour les humains et un peu difficile pour les machines.

Ce que vous recherchez, c'est un sous-ensemble de la rubrique Conception du Saint Graal .

Ici est une implémentation qui utilise l'affichage flex. Elle inclut des barres latérales en plus du pied de page et de l'en-tête. Bonne lecture :

<!DOCTYPE html>
<html style="height: 100%">
  <head>
    <meta charset=utf-8 />
    <title>Holy Grail</title>
    <!-- Reset browser defaults -->
    <link rel="stylesheet" href="reset.css">
  </head>
  <body style="display: flex; height: 100%; flex-direction: column">
    <div>HEADER<br/>------------
    </div>
    <!-- No need for 'flex-direction: row' because it's the default value -->
    <div style="display: flex; flex: 1">
      <div>NAV|</div>
      <div style="flex: 1; overflow: auto">
        CONTENT - START<br/>
        <script>
        for (var i=0 ; i<1000 ; ++i) {
          document.write(" Very long content!");
        }
        </script>
        <br/>CONTENT - END
      </div>
      <div>|SIDE</div>
    </div>
    <div>------------<br/>FOOTER</div>
  </body>
</html>
Répondu el 23 de Octobre, 2015 par Alik Elzin - kilaka (4694 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