logo标签列表

如何创建具有自动高度溢出的div？

htmlcss
4

我卡住了。我的页面上有一个高度设置为某个值的包装div。在这个div中，我有另一个设置了高度的div（黄色的）。在它下面，有一个蓝色的div，其高度随内容自动增长。当内容超过所有可用高度时，我希望该div出现滚动条。

question illustration

这里有一个你可以操作的例子：

.container {
  width: 200px;
  height: 300px;
  padding: 10px;
  border: 1px solid #888891;
}

.header {
  height: 40px;
  background-color: #FEEC63;
  margin-bottom: 10px;
}

.body {
  color: #fff;
  background-color: #63A4FE;
  overflow: hidden; /* why is that not hiding the excess text? */
}
<div class="container">
  <div class="header">
  Hi there!
  </div>
  <div class="body">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </div>
</div>

https://jsfiddle.net/674w4a09/

4个回答
3

将height: calc(100% - 50px);添加到.body上，它就可以正常工作了。

div.body上的溢出不起作用是因为高度没有固定。

为了使其适合其余的容器，您可以使用calc来减去

的高度以及margin-bottom的10像素。

jsfiddle

2

根据 MDN 的说明:

为了使 overflow 属性生效，块级容器必须具有边界高度（height 或 max-height）或将 white-space 设置为 nowrap。

然而，当你从 块格式化上下文 切换到 弹性格式化上下文 时，上述要求不适用，您可以保持简单：

.container {
  display: flex;
  flex-direction: column;
  width: 200px;
  height: 300px;
  padding: 10px;
  border: 1px solid #888891;
}

.header {
  height: 40px;
  background-color: #FEEC63;
  margin-bottom: 10px;
}

.body {
  overflow: hidden; /* switch to 'auto' for scrollbar */
  color: #fff;
  background-color: #63A4FE;
}
<div class="container">
  <div class="header">Hi there!</div>
  <div class="body">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </div>
</div>

1
哇塞，谢谢你！这花费了我很多时间。我甚至认为这是不可能的。 - George
1

将 .body 的高度设置为 calc(100% - 50px)

其中 50px = 40px（头部高度） + 10px（头部底边距）

0
    <!DOCTYPE html>
        <html lang="en">
            <head>
                <style>
                   .container {
  width: 200px;
  height: 300px;
  padding: 10px;
  border: 1px solid #888891;
  overflow: hidden;
}

.header {
  height: 40px;
  background-color: #FEEC63;
  margin-bottom: 10px;

}

.body {
  color: #fff;
  background-color: #63A4FE;
  height: calc(100% - 50px);
}

                </style>
            </head>
            <body>
                <div class="container">
                    <div class="header">
                        Hi there!
                    </div>
                    <div class="body">
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                    </div>
                </div>
            </body>
        </html>
现在在jsfiddle上尝试了一下，不起作用（至少对我来说，Chrome v56），你自己看一下：https://jsfiddle.net/4d5u4Leu/ - George
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接