web-dev-qa-db-fra.com

Div Développer pour remplir visuellement l'espace vertical

J'ai une page qui a un en-tête, un contenu et un pied de page. L'en-tête et le pied de page ont une hauteur fixe et j'aimerais que le contenu ajuste sa hauteur afin qu'il s'adapte dynamiquement entre l'en-tête et le pied de page. Je prévois de placer une image d’arrière-plan dans mon contenu. Il est donc essentiel qu’elle remplisse le reste de l’espace vertical inoccupé.

J'ai utilisé l'approche Sticky Footer pour m'assurer que le pied de page reste en bas de la page. Cela ne fait toutefois pas en sorte que le contenu couvre toute la hauteur de l'espace restant.

J'ai essayé plusieurs solutions qui impliquaient l'ajout de height:100%, height:auto; position:relative mais cela n'a pas fonctionné.

html,
body {
  height: 100%;
  background-color: yellow;
}
header {
  width: 100%;
  height: 150px;
  background-color: blue;
}
header nav ul li {
  display: inline;
  padding: 0 30px 0 0;
  float: left;
}
#wrapper {
  min-height: 100%;
  height: auto !important;
  height: 100%;
  margin: 0 0 -30px 0;
  /* the bottom margin is the negative value of the footer's height */
  position: relative;
}
#wrapper #content {
  background-color: pink;
  width: 400px;
  height: 100%;
  margin: 0 0 -30px 100px;
  padding: 25px 30px 25px 30px;
}
footer {
  margin: -30px 0 0 0;
  width: 100%;
  height: 30px;
  background-color: green;
}
<div id="wrapper">

  <header>
    <div id="logo"></div>

    <nav>
      <ul>
        <li>About</li>
        <li>Menu</li>
        <li>Specials</li>
      </ul>
    </nav>
  </header>

  <div id="content">
    content
    <br>goes
    <br>here
  </div>

</div>

<footer>footer</footer>

htmlcss
18
Jon

Essayez de changer votre css à ceci:

html,
body {
  height: 100%;
  background-color: yellow;
}
header {
  width: 100%;
  height: 150px;
  background-color: blue;
}
header nav ul li {
  display: inline;
  padding: 0 30px 0 0;
  float: left;
}
#wrapper {
  min-height: 100%;
  height: auto !important;
  height: 100%;
  margin: 0 0 -30px 0;
  /* the bottom margin is the negative value of the footer's height */
  position: relative;
}
#content {
  background-color: pink;
  width: 400px;
  padding: 25px 30px 25px 30px;
  position: absolute;
  bottom: 30px;
  top: 150px;
  margin-left: 100px;
}
footer {
  margin: -30px 0 0 0;
  width: 100%;
  height: 30px;
  background-color: green;
}
<div id="wrapper">

  <header>
    <div id="logo"></div>

    <nav>
      <ul>
        <li>About</li>
        <li>Menu</li>
        <li>Specials</li>
      </ul>
    </nav>
  </header>

  <div id="content">
    content
    <br>goes
    <br>here
  </div>

</div>

<footer>footer</footer>

Vous ne voulez probablement pas définir la largeur, le remplissage, les marges, etc. de l'emballage. De plus, avec le positionnement absolu, vous pouvez tirer le contenu du contenu vers le bas et le haut où vous le souhaitez.

Voici ce que vous recherchez , je pense.

7
Gabriel Syme

L'astuce sur la hauteur: 100%, c'est que tous les conteneurs parents doivent également avoir leur hauteur définie. Voici un exemple html

<html>
  <body>
    <div id="container">
    </div>
  </body>
</html>

pour que le conteneur div avec une hauteur définie à 100% se dilate de manière dynamique à la hauteur de la fenêtre, vous devez vous assurer que les éléments body et html ont également une hauteur définie à 100%. alors...

html
{
    height: 100%;
}
body
{
    height: 100%;
}
#container
{
    height: 100%;
}

vous donnerait un conteneur qui s'agrandit pour s'adapter à votre fenêtre. si vous avez besoin d'un pied de page ou d'un en-tête qui flotte au-dessus de cette fenêtre, vous pouvez le faire avec l'indexation z. C’est la seule solution que j’ai trouvée qui remplisse la hauteur verticale de façon dynamique.

8
e.w. parris

Je passe plusieurs heures à essayer de comprendre cela et enfin à avoir une solution robuste sans piratage. Cependant, il nécessite CSS3, qui nécessite un navigateur moderne pour le prendre en charge. Donc, si cette contrainte fonctionne pour vous, alors j'ai une vraie solution pour vous qui fonctionne.

http://jsfiddle.net/u9xh4z74/ .__ Copiez ce code dans votre propre fichier si vous avez besoin de preuves, car JSFiddle ne rendra pas le rendu correctement de la flexbox sous forme de code incorporé.

En gros, vous devez - définir le conteneur cible à 100% de la hauteur, ce que vous semblez déjà connaître - le conteneur parent que vous avez défini affiche: flex et flex-direction: vertical (vous verrez dans JSFiddle J'ai également inclus les styles alternatifs qui font la même chose mais sont nécessaires pour la prise en charge de plusieurs navigateurs) - vous pouvez laisser l'en-tête et le pied de page être leur hauteur naturelle et ne pas avoir besoin de spécifier quoi que ce soit à cet égard - in le conteneur que vous souhaitez remplir l'espace restant, définissez flex: 1. Vous êtes défini! Vous verrez que cela fonctionne exactement comme vous l'avez prévu sémantiquement. Également dans JSFiddle, j'ai inclus overflow: auto pour démontrer que si vous avez plus de texte que l'écran ne peut en gérer, le défilement fonctionne comme vous le souhaitez.

<div style="display:flex; flex-direction:vertical;">
    ...header(s)...
    <div style="flex: 1; overflow: auto;">
         As much content as you want.
    </div>
    ...footer(s)...
</div>

En remarque, j’ai poursuivi l’option d’essayer de faire la même chose en utilisant display: table. Cela fonctionne aussi très bien, sauf que le contenu débordé ne fonctionne pas comme prévu, mais que le contenu débordé étend simplement le conteneur à la taille du contenu, ce qui, j'en suis sûr, n'est pas ce que vous voulez. Prendre plaisir!

5
Stan Lin

Je propose une solution légèrement plus générale, donc il est plus utile pour les autres lecteurs de cette réponse et se demandant comment l’appliquer à leur site.

En supposant que vous ayez trois divs:

<div id='header'></div>
<div id='contents'></div>
<div id='footer'></div>

où #header est fixe et peut avoir une hauteur variable, #contents doit utiliser tout l'espace vertical restant et #footer est fixe et peut avoir une hauteur variable, vous pouvez le faire:

/* Note you could add a container div instead of using the body */
body {
  display: flex;
  flex-direction: column;
}
#header {
  flex: none;
}
#contents {
  flex: 1;
  height: 100%;
  overflow-y: scroll;
}
#footer {
  flex: none;
}

Notez que cela permettra au contenu de défiler verticalement pour afficher tout son contenu.

Vous pouvez en savoir plus sur display: flex here .

5
owencm

Utilisez display: table et display: table-row Définissez hauteur: 0 pour les divs normales et height: auto pour les divisions devant remplir l'espace vertical. Insérer une div avec {hauteur: 100%; overflow-y: auto} dans le remplissage vertical si la hauteur du conteneur ne doit pas dépasser la hauteur prédéfinie . Voici le pouvoir de display: table!

<div style="height:300px;">
  <div style="display:table; height:100%; width:100%;border: 1px solid blue;">
    <div style="display: table-row; height:0; padding:2px; background-color:yellow;">
      Hello          
    </div>
    <div style="display: table-row; height:auto; padding:2px; background-color:green;">
      <div style="height:100%; overflow: auto;">
        <div style="height: 500px"></div>
      </div>
    </div>
    <div style="display: table-row; height:0; padding:2px; background-color:yellow;">
      Gbai
    </div>
  </div>
</div>
1
clearfix