将 div 扩展到页面底部（仅限 HTML 和 CSS）

Question

这是一个非常简单的问题，但我似乎无法在网上找到合适的解决方案。我想要一个自然流动的元素列表，最后一个元素扩展到页面底部。所以如果我有

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

我需要元素 bottom 从 top 的底部延伸到页面底部。欢迎任何仅使用 html 和 css 的解决方案，您可以添加容器 div 或任何东西，只要我可以动态调整 bottom div 的大小

编辑：我不想硬编码 bottom 的任何值，因为我想要 bottom 调整 if top -b-5c79

这是满足您所有摆弄需求的小提琴：http: //jsfiddle.net/8QnLA/

原文由 woojoo666 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

解决方案：#1：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（内容很少）

Codepen #2（很多内容）

解决方案 #2：使用计算和视口单位

#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（内容很少）

Codepen #2（很多内容）

解决方案#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 - 内容很少

Codepen #2 - 很多内容

原文由 Danield 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

将 html, body 的高度设置为 100% 。然后，您可以将最后一个 <div> 的高度设置为 100% ，它将与窗口一样高。由于您可能不想滚动，因此您也可以在 overflow: hidden html, body

http://jsfiddle.net/GKbzx/

原文由 Explosion Pills 发布，翻译遵循 CC BY-SA 3.0 许可协议