Div高度为100％，并扩展以适合内容

我的页面上有一个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中的内容基本上是绝对定位的，并且是从数据库动态生成的，因此无法预先知道其高度。

编辑：这是问题的屏幕截图：

这是您应该使用CSS样式执行的操作 div

display: block;
overflow: auto;

而且不要碰 height

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

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

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

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

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

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

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

它应该一直工作。你可以调用类的名称。集团而不是.clearfix，因为它使代码更语义。请注意，不必在双引号“”之间的Content值中添加点或什至空格。另外，溢出：自动；也许可以解决问题，但是会引起其他问题，例如显示滚动条，因此不建议这样做。

来源：Lisa Catalano和Chris Coyier博客

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

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

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

试试这个：

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

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

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

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

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

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

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

display: block;
overflow: auto;

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

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

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

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

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

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

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

连你都可以这样

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

这将根据内容包括每个动态div。假设如果您的班级有一个共同的div，它将根据内容增加每个动态div的高度

您也可以使用

 display: inline-block;

我的工作与此

无位置叠加：已修复

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

position: relative

并像这样设置包装器类：

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

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

使用flex

.parent{
    display: flex
}

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

好的，我尝试过这样的事情：

身体（正常）

#MainDiv { 
  /* where all the content goes */
  display: table;
  overflow-y: auto;
}

这不是确切的编写方式，但是如果将主div显示为表格，它将展开，然后实现滚动条。