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

即使您可以这样做

Answer 3

确定，我尝试过类似的事情

Answer 4

您也可以使用

Answer 5

我看了几个答案并将它们合并。这是：

#some-div {
    overflow:scroll;
    display:block;
    min-height:100%;
}

Answer 6

现代浏览器支持“视口高度”单元。这会将div扩展到可用的视口高度。我发现它比其他任何方法都更可靠。

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

Answer 7

将height设置为auto，将min-height设置为100%。这应该可以解决大多数浏览器的问题。

Answer 8

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

Answer 9

如果只离开height: 100%并使用display:block;，则div将占用div中内容的空间。这样，所有文本将保留在黑色背景中。

Answer 10

尝试一下：

Answer 11

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

Answer 12

[旧问题，但就我而言，我发现使用position:fixed为我解决了这个问题。我的情况可能有所不同。我有一个叠加的半透明div，上面有一个加载动画，需要在加载页面时显示该动画。因此，使用height:auto / 100%或min-height: 100%都填充了窗口，但没有填充屏幕外区域。使用position:fixed可以使该叠加层与用户一起滚动，因此它始终覆盖可见区域，并使我的预加载动画在屏幕上居中。

Answer 13

只需在您的CSS ID #some_div中添加这两行

Answer 14

我不完全确定我已经理解了这个问题，因为这是一个相当简单的答案，但是这里...：）