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

I have a div element on my page with its height set to 100%. The height of the body is also set to 100%. The inner div has a background and all that and is different from the body background. This works for making the div height 100% of the browser screen height, but the problem is I have content inside that div that extends vertically beyond the browser screen height. When I scroll down, the div ends at the point at which you had to begin scrolling the page, but the content overflows beyond that. How do I make the div always go all the way to the bottom to fit the inner content?

这是我的CSS的简化:

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

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

一旦我滚动页面，黑色就结束了，内容就会流向红色背景。不管我在#some_div上设置的位置是相对的还是绝对的，问题都发生了。#some_div中的内容大多是绝对定位的，并且它是从数据库动态生成的，因此无法预先知道它的高度。

编辑:下面是问题的截图:

当前回答

这个问题可能很老了，但它值得更新。这里有另一种方法:

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

2018-05-29 02:47:09

其他回答

如果你只保留高度:100%并使用display:block;div将占用与div内内容一样大的空间。这样所有的文本将保持在黑色背景中。

2012-03-02 17:42:42

试试这个:

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

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

IE6及之前版本不支持min-height属性。

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

如果你的内容没有填满一整个页面的底部，主体上的min-height属性应该强制背景至少和一个视口一样高，然而，它也应该让它向下生长，以包含更多的内部内容。

2012-03-05 10:55:43

这个问题可能很老了，但它值得更新。这里有另一种方法:

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

2018-05-29 02:47:09

#some_div {    
  height: fit-content;
}

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

2021-09-14 10:23:05

你也可以使用

 display: inline-block;

我的工作就是这个

2019-12-05 06:53:01

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

推荐文章

最新文章

标签