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

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


当前回答

试试这个:

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

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

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

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

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

其他回答

你也可以使用

 display: inline-block;

我的工作就是这个

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

在你的CSS文件中写入下面的类。clearfix和伪选择器

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

然后,在你的HTML中,添加.clearfix类到你的父Div中。例如:

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

它应该一直工作。您可以将类名调用为.group而不是.clearfix,因为这将使代码更具语义性。注意,在双引号“”之间的Content值中不需要添加点甚至空格。另外,overflow: auto;也许可以解决问题,但它会导致其他问题,如显示滚动条,不建议使用。

来源:Lisa Catalano和Chris Coyier的博客

设置高度为auto,最小高度为100%。这应该可以解决大多数浏览器的问题。

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

试试这个:

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

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

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

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

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

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.