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

以下是您应该在主要div

上的CSS样式中执行的操作

display: block;
overflow: auto;

请勿触摸height

Answer 2

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

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

Answer 3

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

在您的CSS文件中，编写以下名为 .clearfix 的类以及伪选择器：after

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

然后，在您的HTML中，将.clearfix类添加到您的父Div。例如：

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

它应该始终有效。您可以将类名称称为 .group 而不是 .clearfix ，因为它会使代码更具语义。请注意，不必在双引号“”之间的Content值中添加点或甚至空格。此外，溢出：自动; 可能会解决问题，但它会导致其他问题，例如显示滚动条，不推荐使用。

来源：Lisa Catalano和Chris Coyier的博客

Answer 4

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

Answer 5

试试这个：

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

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

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

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

如果你的内容没有将整个页面填充到底部，那么身体上的这个最小高度属性应该强制背景至少与一个视口一样高， 但它也应该让它向下生长，以包含更多的内部内容。

Answer 6

老问题，但在我的情况下，我发现使用position:fixed解决了它。 我的情况可能会有所不同。我有一个叠加的半透明div，其中有一个加载动画，我需要在页面加载时显示。因此，使用height:auto / 100%或min-height: 100%填充窗口但不填充屏幕外区域。使用position:fixed使这个叠加层滚动到用户，因此它总是覆盖可见区域并使我的预加载动画在屏幕上居中。

Answer 7

使用flex

.parent{
    display: flex
}

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

Answer 8

只需将这两行添加到您的CSS ID #some_div

display: block;
overflow: auto;

之后，您将得到想要的东西！

Answer 9

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

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

Answer 10

就我而言，它仅适用于：

height:auto;

您不需要放置 display:block。

Answer 11

没有位置的叠加层：已固定

我在最近的菜单中发现了一个非常酷的方法，就是将主体设置为：

position: relative

并像这样设置包装器类：

#overlaywrapper {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    background: #00000080;
    z-index: 100;
}

这意味着您不必固定设置位置，仍然可以滚动。我已经用它来覆盖很大的菜单了。

Answer 12

您也可以使用

 display: inline-block;

我的工作与此

Answer 13

好的我试过这样的事情

身体（正常）

MainDiv（所有内容都在其中）：显示：table; overflow-y：auto

它不是写它的确切方法，但是如果你把主div显示为一个表，它会扩展，然后我有滚动条。

Answer 14

即使你可以这样做

display:block;
overflow:auto;
height: 100%;

这将根据内容包含您的每个动态div。 假设你有一个带有类的公共div，它会根据内容增加每个动态div的高度

Answer 15

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

您是否尝试将容器的溢出属性设置为可见或自动？

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

添加它应该将黑色容器推到动态容器所需的任何大小。 我更喜欢可见到自动，因为自动似乎带有滚动条......

Answer 16

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

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

Answer 17

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

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

这个答案效果最好，因为当前支持的答案会打开溢出的自动选项（这与某些浏览器中的滚动不同）。这也允许您设置最小高度，与接受的答案不同，不能触及高度。