web-dev-qa-db-fra.com

Étendre div en bas de page (uniquement HTML et CSS)

C'est un problème très simple mais je n'arrive pas à trouver une solution appropriée en ligne. Je veux avoir une liste d'éléments en écoulement naturel avec le dernier élément étendu au bas de la page. Donc si j'ai

<div id="top" style="height:50px;"></div>
<div id="bottom" style="background:lightgrey;"></div>

J'ai besoin que l'élément bottom s'étende du bas de top au bas de la page. Toute solution qui utilise uniquement html et css est la bienvenue, et vous pouvez ajouter des divs de conteneur ou quoi que ce soit, tant que je peux obtenir un redimensionnement dynamique du bottom div

EDIT: Je ne veux coder en dur aucune valeur pour bottom, car je veux que bottom s'ajuste si top est redimensionné

voici un violon pour tous vos besoins de violon: http://jsfiddle.net/8QnLA/

htmlcssposition
27
woojoo666

Solution: # 1: tableaux CSS:

html, body {
  height: 100%;
  width: 100%;
}
body {
  display: table;
  margin: 0;
}
#top, #bottom {
  width: 100%;
  background: yellow;
  display: table-row;
}
#top {
  height: 50px;
}
#bottom {
  background: lightgrey;
  height: 100%;
}

html, body {
  height: 100%;
  width: 100%;
}
body {
  display: table;
  margin: 0;
}
#top, #bottom {
  width: 100%;
  background: yellow;
  display: table-row;
}
#top {
  height: 50px;
}
#bottom {
  background: lightgrey;
  height: 100%;
}
<div id="top" style="height:50px;"><span>A header</span></div>
<div id="bottom" style="background:lightgrey;"><span>The content area - extends to the bottom of the page</span></div>

Codepen # 1 (peu de contenu)

Codepen # 2 (beaucoup de contenu)

Solution n ° 2: utilisation des unités de calcul et de fenêtre

#top {
  height: 50px;
  background: yellow;
}
#bottom {
  background: lightgrey;
  min-height: calc(100vh - 50px);
}

body {
  margin: 0;
}
#top {
  height: 50px;
  background: yellow;
}
#bottom {
  background: lightgrey;
  min-height: calc(100vh - 50px);
}

Where `min-height: calc(100vh - 50px);` means:

'Let the height of the content div be **at least** 100% of the viewport height minus the 50px height of the header.'
<div id="top" style="height:50px;"><span>A header</span></div>
<div id="bottom" style="background:lightgrey;"><span>The content area - extends to the bottom of the page</span></div>

Codepen # 1 (peu de contenu)

Codepen # 2 (beaucoup de contenu)

Solution # 3 - Flexbox

body {
  margin: 0;
  min-height: 100vh;
}
body {
  display: flex;
  flex-direction: column;
}
#top {
  height: 50px;
  background: yellow;
}
#bottom {
  background: lightgrey;
  flex: 1;
}

body {
  margin: 0;
  min-height: 100vh;
}
body {
  display: flex;
  flex-direction: column;
}
#top {
  height: 50px;
  background: yellow;
}
#bottom {
  background: lightgrey;
  flex: 1;
}
<div id="top" style="height:50px;"><span>A header</span></div>
<div id="bottom" style="background:lightgrey;"><span>The content area - extends to the bottom of the page</span></div>

Codepen # 1 - peu de conten

Codepen # 2 - beaucoup de conten

52
Danield

Définissez la hauteur de html, body à 100%. Ensuite, vous pouvez définir le dernier <div> de la hauteur à 100% et elle sera aussi haute que la fenêtre. Comme vous ne voulez probablement pas faire défiler, vous pouvez définir overflow: hidden sur le html, body ainsi que.

http://jsfiddle.net/GKbzx/

3
Explosion Pills