关于css：Div高度100％并扩展以适应内容


Div height 100% and expands to fit content

我的页面上有一个DIV元素，其高度设置为100%。车身高度也设置为100%。内部DIV有一个背景和所有这些，并且与主体背景不同。这适用于使DIV高度100%成为浏览器屏幕高度，但问题是我在该DIV中的内容垂直扩展到浏览器屏幕高度之外。当我向下滚动时，DIV结束于您必须开始滚动页面的点，但是内容超出了该点。如何使DIV始终从下到下适应内部内容？

以下是我的CSS的简化：

1
2
3
4
5
6
7
8
9
body {
    height:100%;
    background:red;
}

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

一旦我滚动页面，黑色结束，内容流到红色背景。我在某个分区上把位置设置为相对或绝对似乎无关紧要，问题是以任何一种方式发生的。some_div中的内容大部分是绝对定位的，它是从数据库动态生成的，因此其高度不能预先知道。

编辑：以下是问题的屏幕截图：div problem

相关讨论

下面是您应该在主div上使用css样式执行的操作

1
2
display: block;
overflow: auto;

不要碰height。

相关讨论

将height设置为auto，min-height设置为100%。对于大多数浏览器来说，这应该能解决问题。

1
2
3
4
5
body {
  position: relative;
  height: auto;
  min-height: 100% !important;
}
相关讨论

通常，当父DIV的子元素被浮动时，就会出现这个问题。以下是该问题的最新解决方案：

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

1
2
3
4
5
.clearfix:after {
content:"";
display: table;
clear: both;
}

然后，在HTML中，将.clearfix类添加到父分区。例如：

1
 

它应该一直有效。您可以将类名称为.group而不是.clearfix，因为它将使代码更加语义化。请注意，在双引号之间不需要在内容值中添加点甚至空格"。另外，overflow:auto；可能会解决此问题，但它会导致其他问题，如显示滚动条，不推荐使用。

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

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

相关讨论

试试这个：

1
2
3
4
5
6
7
8
9
body {
    min-height:100%;
    background:red;
}

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

IE6和早期版本不支持最小高度属性。

我认为问题在于，当你告诉身体100%的高度时，它的背景高度只能和一个浏览器"视区"(不包括浏览器工具栏和状态栏、菜单栏和窗口边缘)的高度一样高。如果内容高于一个视区，它将溢出专门用于背景的高度。

主体上的"最小高度"属性应强制背景至少与一个视区一样高，如果内容没有向下填充一整页，然而，它也应该让它向下发展，以包含更多的内部内容。

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

把这两行加到你的css id中

1
2
display: block;
overflow: auto;

在那之后你会得到你想要的！

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

1
2
3
4
5
#yourdiv {
    display: flex;
    width:100%;
    height:100%;
}
相关讨论

好的，我试过这样的东西

身体(正常)

mainDiv(所有内容的位置)：display:table；overflow-y:auto

这不是写它的确切方法，但是如果您将主DIV显示为一个表，它就会展开，然后我得到滚动条。

你也可以这样做

1
2
3
display:block;
overflow:auto;
height: 100%;

这将根据内容包括每个动态分区。假设您有一个带有类的公共DIV，它将根据内容增加每个动态DIV的高度。

相关讨论

我不完全确定我是否理解这个问题，因为这是一个相当直截了当的答案，但下面是…：)

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

1
2
3
4
5
#some_div {
    height:100%;
    background:black;
    overflow: visible;
    }

添加它可以将黑色容器推到动态容器所需的任何大小。我喜欢可见而不是自动，因为自动似乎带有滚动条…

现代浏览器支持"视区高度"单元。这将把DIV扩展到可用的视区高度。我发现它比其他方法更可靠。

1
2
3
4
#some_div {
    height: 100vh;
    background: black;
}

我看了几个答案，然后把它们组合起来。这里是：

1
2
3
4
5
#some-div {
    overflow:scroll;
    display:block;
    min-height:100%;
}

此答案最有效，因为当前支持的答案会打开溢出的自动选项(与某些浏览器中的滚动不同)。这也允许你设置一个最低的高度，不像在接受的答案，你不能接触的高度。

相关讨论