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

【问题标题】：Extend div to bottom of page (only HTML and CSS)将 div 扩展到页面底部（仅 HTML 和 CSS）
【发布时间】：2014-05-20 23:18:09
【问题描述】：

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

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

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

编辑：我不想硬编码bottom 的任何值，因为我希望bottom 调整top 的大小

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

【问题讨论】：

标签： html css position

【解决方案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 (little content)

Codepen #2 (lots of content)

解决方案 #2：使用 calc 和 viewport 单位

#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 (little content)

Codepen #2 (lots of content)

解决方案 #3 - 弹性盒

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 - little content

Codepen #2 - lots of content

【讨论】：

哇，感谢您的超越，但表格方法对我来说是最好的！
解决方案 2 仅在您有可见的内容时才有效 - 如果有任何内容超出折叠 - 这就是“#bottom”元素将延伸到并停止的地方。所以它会根据我的理解延伸到页面底部。
解决方案 2 不适用于 safari，因为它不支持涉及视口相对单位 vh 和 vw 的计算。
@user1230795 - 感谢您指出这一点 - 我使用 min-height 属性而不是 height 属性更新了帖子。
@ThomasMaier - 我更新了解决方案 2，我刚刚验证它在 Safari 中有效。问题是我使用了 'height` 属性而不是 min-height 属性。

【解决方案2】：

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

http://jsfiddle.net/GKbzx/

【讨论】：

@web-tiki 如果内容超出页面底部，它只会隐藏部分内容。如果是这样，那么一开始就不需要这样的解决方案
OP 似乎需要一种能够适应多种情况的解决方案，例如在具有不同内容的多个页面上使用布局和/或应该更新内容和/或在多个大小视口上显示内容。在所有这些情况下，内容都可能超出页面底部。
-1 因为OP写他需要元素bottom从top的底部延伸到页面底部；不超出页面。