Div高度100%并扩展以适合内容

Question

我的页面上有一个div元素,其高度设置为100%.身体的高度也设定为100%.内部div具有背景和所有这些并且与身体背景不同.这适用于使div高度为浏览器屏幕高度的100%,但问题是我在div内部的内容垂直延伸超出浏览器屏幕高度.当我向下滚动时,div在您必须开始滚动页面的位置结束,但内容溢出超出该范围.如何让div始终一直到底以适应内在的内容？

这是我的CSS的简化:

body {
    height:100%;
    background:red;
}

#some_div {
    height:100%;
    background:black;
}

滚动页面后,黑度结束,内容流向红色背景.在#some_div上我将位置设置为相对位置还是绝对位置似乎并不重要,问题是否发生.#some_div中的内容大多是绝对定位的,它是从数据库动态生成的,因此无法提前知道其高度.

编辑:以下是问题的屏幕截图:

Answer 1

以下是你应该在主要的CSS样式中做的事情 div

display: block;
overflow: auto;

不要碰 height

Answer 2

将height要auto和min-height到100%.这应该解决大多数浏览器.

body {
  position: relative;
  height: auto;
  min-height: 100% !important;
}

Answer 3

#some_div {    
  height: fit-content;
}

https://developer.mozilla.org/en-US/docs/Web/CSS/fit-content

Answer 4

通常,当父Div的子元素浮动时会出现此问题.这是问题的最新解决方案:

在你的CSS文件中写下以下类.clearfix和伪选择器:after

.clearfix:after {
content: "";
display: table;
clear: both;
}

然后,在您的HTML中,将.clearfix类添加到您的父Div.例如:

<div class="clearfix">
    <div></div>
    <div></div>
</div>

它总是应该工作.你可以调用类的名称.集团而不是.clearfix,因为它将使代码更多的语义.请注意,不必在双引号""之间的Content值中添加点或甚至空格.另外,溢出:auto; 可能会解决问题,但它会导致其他问题,如显示滚动条,不建议.

资料来源:Lisa Catalano和Chris Coyier的博客

Answer 5

如果你只是离开height: 100%并使用display:block;,div将占用尽可能多的空间内容div.这样所有文本都将保留在黑色背景中.

Answer 6

这个问题可能很旧，但值得更新。这是另一种方法：

#yourdiv {
    display: flex;
    width:100%;
    height:100%;
}

Answer 7

尝试这个：

body { 
    min-height:100%; 
    background:red; 
} 

#some_div {
    min-height:100%; 
    background:black; 
} 

IE6和更早版本不支持min-height属性。

我认为问题在于，当您告诉身体高度为100％时，背景的高度只能与一个浏览器“视口”的高度一样高（不包括浏览器工具栏，状态栏和菜单栏以及窗口边缘）。如果内容比一个视口高，它将溢出专用于背景的高度。

如果您的内容未填满整个页面直到底部，则主体上的此min-height属性应强制背景至少与一个视口一样高，但也应使其向下增长以包含更多内部内容。

Answer 8

使用弹性

.parent{
    display: flex
}

.fit-parent{
    display: flex;
    flex-grow: 1
}