Question

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

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

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

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

＆＃13;

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;
}

＆＃13;

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

＆＃13;

Answer 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>

Answer 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>

Answer 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>

Answer 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;
}

Answer 5

可能使用calc()代替.top的高度，而不是使用display: table

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

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

看看这个工作小提琴：this one

CSS Stretch内容容器高度如果空溢出，如果太大

5 个答案: