CSS拉伸内容容器高度如果空溢出如果太大[重复]答案

【问题标题】：CSS Stretch content container height if empty overflow if too big [duplicate]CSS拉伸内容容器高度如果空溢出如果太大[重复]
【发布时间】：2016-04-06 20:57:02
【问题描述】：

我拥有的是container 后跟两个子元素content 和footer 的简单结构。

footer 有一个固定的高度，content 应该填充剩余的空白空间。使用display:table; 很容易实现这一点，但由于某种原因，如果content 元素的内容超过网站窗口高度，我无法弄清楚如何让其溢出工作？

这是一个JSFiddle，如果您将content_child 高度设置为10px，您可以看到content 元素很好地填充了空间，但是当content_child 大很多时content 元素不应该扩展它现在的方式，我在这里缺少什么？

如果可能的话，我宁愿不使用 JavaScript 来解决这个问题。

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

.container{
  display:table;
  background; black;
  width: 100%;
  background: black;
  height: 100%;
}
.top{
  background: blue;
  display:table-row;
  height: 100%;
}

.bottom{
  background: red;
  height: 60px;
}

.content{
  height: 100%;
  overflow: hidden;
  padding: 5px;
}

.content_child{
  height: 1000px;
  background: grey;
}

<div class="container">
    <div class="top">
      <div class="content">
          <div class="content_child"></div>
          </div>
      </div>
  </div>
  <div class="bottom">
  </div>
</div>

【问题讨论】：

顺便说一句；你有一个额外的关闭 div。看起来您正在尝试关闭 <div class="content_child"> 两次
你想要一个固定的页脚还是你想要实现什么？无论如何，很可能有比使用表格更好的方法来实现您想要做的事情。因此，让我们不要从解决方案开始，而是从问题开始。
@Roope 是的，页脚应该固定，内容填充其余空间
在溢出的情况下内容是否可以滚动，或者如何？
@roope 内容应始终填充网站上的剩余空间，如果其内容大于网站，则应具有溢出-y：滚动

标签： html css

【解决方案1】：

Flexbox 可以做到这一点。

body {
 margin:0;
 }

.container {
  height: 100vh;
  display: flex;
  flex-direction: column;
}
.content {
  flex: 1;
  background: #bada55;
  overflow-y: auto;
}
.expander {
  height: 1000px;
  /* for demo purposes */
}
footer {
  background: red;
  height: 60px;
}

<div class="container">
  <div class="content">
    <div class="expander"></div>
  </div>
  <footer></footer>
</div>

【讨论】：

您需要修复正文边距以避免正文滚动...
只是为了演示技术...无需重载演示...但为什么不呢。

【解决方案2】：

您唯一需要做的就是更改此 CSS 规则

.content{
  height: 100%;
  overflow: auto;   /* change from hidden to auto */
  padding: 5px;
}

这将使它看起来/像这样工作

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

.container{
  display:table;
  background; black;
  width: 100%;
  background: black;
  height: 100%;
}
.top{
  background: blue;
  display:table-row;
  height: 100%;
}

.bottom{
  background: red;
  height: 60px;
}

.content{
  height: 100%;
  overflow: auto;
  padding: 5px;
}

.content_child{
  height: 1000px;
  background: grey;
}

<div class="container">
  <div class="top">
    <div class="content">
      <div class="content_child"></div>
    </div>
  </div>
  <div class="bottom">  
  </div>
</div>

【讨论】：

我没有看到你的答案...否则我不会发布我的。无论如何，我会将其作为解决此问题的替代方法
@vals 离开吧，flex 比display: table 更好，实际上更好... :)
不幸的是，这个解决方案似乎不适用于我的 firefox。
@Linas 查了一下，这是FF中的一个bug，bugzilla.mozilla.org/show_bug.cgi?id=565111，所以我的建议是使用flex，然后为不知道flex的人使用@创建一个后备987654329@。如果您可以在底部 div 上设置固定高度，您当然可以使用position: fixed或position: absolute，也许table-layout: fixed 也可以。

【解决方案3】：

真的不需要桌子。根据您要达到的目标，这可能对您有用：

body {
  padding: 0;
  margin: 0;
}
.content {
  position: fixed;
  top: 0;
  bottom: 50px;
  width: 100%;
  background: blue;
  color: #fff;
  overflow-y: auto;
}
.footer {
  position: fixed;
  bottom: 0;
  height: 50px;
  width: 100%;
  background: red;
}

<div class="content">
  <p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p>
  <p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p>
  <p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p>
  <p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p>
  <p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p>
  <p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p>
  <p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p>
  <p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p>
</div>
<div class="footer"></div>

如果没有更好的目的，您可以随时更改body 背景，这里的最终结果相同，但代码更少。唯一的区别是滚动条也显示在页脚上方。

body {
  padding: 0;
  margin: 0;
  background: blue;
  color: #fff;
}
.footer {
  position: fixed;
  bottom: 0;
  height: 50px;
  width: 100%;
  background: red;
}

<p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p>
<p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p>
<p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p>
<p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p>
<p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p>
<p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p>
<p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p>
<p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p>
<div class="footer"></div>

【讨论】：

好吧，这似乎可行，但使用 position: fixed;我实际上需要在我的网站的一部分中实现它，所以它不会真正起作用。我尽量简化我的例子，很抱歉混淆了它。
它怎么会真的不起作用，即是什么让它成为一个肮脏的黑客？无论如何，第二种简单方法对您有什么不利之处？

【解决方案4】：

如果您将高度设置为自动，我希望这会有所帮助

body, html{
  padding: 0px;
  margin: 0px;
}

.container{
  display:table;
  background; black;
  width: 100%;
  background: black;
  height: auto;
}
.top{
  background: blue;
  display:table-row;
  height: auto;
}

.bottom{
  background: red;
  height: 60px;
}

.content{
  height: auto;
  overflow: hidden;
  padding: 5px;
}

.content_child{
  height: auto;
  background: grey;
}

【讨论】：

对不起，您错过了 content_child 的重点，这只是一个示例，我实际上不知道它的高度...
@linas 是的，当您设置自动高度时，它将根据内容大小自动管理

【解决方案5】：

也许使用calc() 的高度为.top 而不是使用display: table

.top{
    background: blue;
    height: calc(100% - 70px);
    padding: 5px;
}

.content{
    height: 100%;
    overflow-y: scroll;
}

看看这个工作小提琴：https://jsfiddle.net/xyxj02ge/4/

【讨论】：

只有在其他一切都失败时才去calc。可能还有其他适用于所有浏览器的简单解决方案。