我如何迫使一个DIV块扩展到一个页面的底部，即使它没有内容?

在下面所示的标记中，我试图让内容div一直延伸到页面的底部，但只有在有内容要显示时才会拉伸。我想这样做的原因是，即使没有任何内容显示，垂直边界仍然出现在页面下方。

下面是我的演示:

body { font-family: Trebuchet MS, Verdana, MS Sans Serif; font-size:0.9em; margin:0; padding:0; } div#header { width: 100%; height: 100px; } #header a { background-position: 100px 30px; background: transparent url(site-style-images/sitelogo.jpg) no-repeat fixed 100px 30px; height: 80px; display: block; } #header, #menuwrapper { background-repeat: repeat; background-image: url(site-style-images/darkblue_background_color.jpg); } #menu #menuwrapper { height:25px; } div#menuwrapper { width:100% } #menu, #content { width:1024px; margin: 0 auto; } div#menu { height: 25px; background-color:#50657a; } <form id="form1"> <div id="header"> <a title="Home" href="index.html" /> </div> <div id="menuwrapper"> <div id="menu"> </div> </div> <div id="content"> </div> </form>

当前回答

Try:

html, body {
    height: 102%;
}
.wrapper {
    position: relative;
    height: 100%;
    width: 100%;
}
.div {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1000px;
    min-height: 100%;
}

还没测试过…

2011-03-07 23:10:28

其他回答

根据布局的工作方式，你可能会在<html>元素上设置背景，它总是至少是视口的高度。

2009-02-23 19:29:45

试试下面的css规则:

#content {
    min-height: 600px;
    height: auto !important;
    height: 600px;
}

改变高度以适应你的页面。为了跨浏览器兼容性，高度提到了两次。

2008-09-29 04:47:19

我认为这个问题会被修复，只是让html填充100%，可能是body 100%地填满了HTML但HTML并没有100%地填满屏幕。

试一试:

html, body {
      height: 100%;
}

2016-08-08 08:38:24

你的问题不是div没有100%的高度，而是它周围的容器没有。这将在我怀疑你正在使用的浏览器中有所帮助:

html,body { height:100%; }

你可能还需要调整填充和页边距，但这将使你达到90%的效果。如果你想让它在所有浏览器上都能正常工作，你就得花点心思。

这个网站有一些很好的例子:

http://www.brunildo.org/test/html_body_0.html http://www.brunildo.org/test/html_body_11b.html http://www.brunildo.org/test/index.html

我也推荐你去http://quirksmode.org/

2009-02-23 20:09:13

你可能还会喜欢这个:http://matthewjamestaylor.com/blog/ultimate-2-column-left-menu-pixels.htm

这不是你所要求的，但也可能适合你的需要。

2008-09-29 04:46:43

我如何迫使一个DIV块扩展到一个页面的底部，即使它没有内容?

推荐文章

最新文章

标签