在下面显示的标记中,我试图让内容 div 一直拉伸(stretch)到页面底部,但只有在有内容要显示时才会拉伸(stretch)。我想这样做的原因是即使没有任何内容要显示,垂直边框仍然会出现在页面下方。
这是我的DEMO:
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>
最佳答案
您的问题不是 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
关于css - 即使没有内容,如何强制 DIV block 扩展到页面底部?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/147528/