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中的内容大多是绝对定位的,并且它是从数据库动态生成的,因此无法预先知道它的高度。

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


当前回答

你也可以这样做

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

这将包括您的每个动态div根据内容。 假设你有一个通用的div类,它会根据内容增加每个动态div的高度

其他回答

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

在我的情况下,它只适用于:

height: auto;

你不需要放display: block。

你也可以这样做

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

这将包括您的每个动态div根据内容。 假设你有一个通用的div类,它会根据内容增加每个动态div的高度

没有位置的覆盖:固定

我在最近的菜单中发现了一个非常酷的方法,那就是将正文设置为:

position: relative

并像这样设置你的包装器类:

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

这意味着你不必设置位置固定,仍然可以允许滚动。我用这个来覆盖非常大的菜单。

Old question, but in my case i found using position:fixed solved it for me. My situation might have been a little different though. I had an overlayed semi transparent div with a loading animation in it that I needed displayed while the page was loading. So using height:auto / 100% or min-height: 100% both filled the window but not the off-screen area. Using position:fixed made this overlay scroll with the user, so it always covered the visible area and kept my preloading animation centred on the screen.