如何强制DIV块扩展到页面的底部，即使它没有内容吗？ [英] How do I force a DIV block to extend to the bottom of a page even if it has no content?
问题描述
在下面的标记中，我想让内容div伸展到页面底部，但它只有伸展，如果有内容显示。我想这样做的原因是，即使没有任何内容可以显示，垂直边框仍显示在页面下。
In the markup shown below, I'm trying to get the content div to stretch all the way to the bottom of the page but it's only stretching if there's content to display. The reason I want to do this is so the vertical border still appears down the page even if there isn't any content to display.
这是我的 HTML ：
<body>
<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>
和我的 CSS ：
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;
}
推荐答案
div不是100％的高度，但是它周围的容器不是。这将有助于在我怀疑你正在使用的浏览器：
Your problem is not that the div is not at 100% height, but that the container around it is not.This will help in the browser I suspect you are using:
html,body { height:100%; }
您可能还需要调整填充和边距，但这会让你90％
You may need to adjust padding and margins as well, but this will get you 90% of the way there.If you need to make it work with all browsers you will have to mess around with it a bit.
这个网站有一些很好的例子：
This site has some excellent examples:
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/
-Jason
这篇关于如何强制DIV块扩展到页面的底部，即使它没有内容吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
