logo标签列表

如果内容为空，则CSS拉伸内容容器的高度，如果太大则溢出。

htmlcss
6
我所拥有的是一个简单的结构，由一个名为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>

在内容溢出的情况下，是否应该使内容可滚动？ - Roope
@roope的内容应始终填充网站上剩余的空间，如果其内容比网站更大，则应具有overflow-y: scroll。 - Linas
设置高度为自动，无需定义值。 - devpro
当内容较大时，页脚是否应始终可见，这意味着滚动条应出现在内容 div 上？ - Asons
不要使用display:table，请改用display:flex。这样应该比较简单，底部的stretch为0，内容区域的stretch为1。 - Aleks G
显示剩余3条评论
5个回答
4
弹性盒子可以做到这一点。 

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>

你需要修复页面主体边距以避免页面滚动... - Asons
这只是演示技术的一个例子，没有必要过度展示演示，但为什么不呢。 - Paulie_D
4
你只需要更改这个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
@vals 不用理它，使用flex比display: table更好，而且是一种更好的方式... :) - Asons
很遗憾，这个解决方案在我的火狐浏览器上似乎无法工作。 - Linas
@Linas 已经检查过了，这是 Firefox 中的一个 bug，https://bugzilla.mozilla.org/show_bug.cgi?id=565111，我的建议是使用 flex，然后为不熟悉 flex 的人创建一个回退方案，使用 display: table。如果您可以在底部 div 上设置固定高度，当然可以使用 position: fixed 或 position: absolute，也许 table-layout: fixed 也可以。 - Asons
2

真的不需要表格。根据您所要达到的目的，这可能适合您：

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;是一种不太正规的方法。我实际上需要将其实现到我的网站的某个部分中，所以这并不真正适用。我尽可能简化了我的示例，对于造成困惑，我感到很抱歉。 - Linas
它为什么真的不起作用，即什么使它成为肮脏的黑客？无论如何，第二种简单方法对您有什么不利影响？ - Roope
2
我希望这能帮助你，如果你将高度设置为自动。
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
@linas 当你将高度设置为自动时，它会根据内容大小自动管理。 - devpro
1
也许可以使用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”。可能存在其他简单的解决方案，适用于所有浏览器。 - Roope
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接