如何强制DIV块延伸到页面底部，即使它没有内容？
如何强制DIV块延伸到页面底部，即使它没有内容？
提问于 2008-09-29 04:40:24
在下面显示的标记中，我试图让content 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>
回答 18
Stack Overflow用户
回答已采纳
发布于 2009-02-23 20:09:14
你的问题不是div不是100%的高度，而是它周围的容器是not.This，这将有助于我怀疑你正在使用的浏览器：
html,body { height:100%; }您可能还需要调整填充和边距，但这将使您的there.If 90%的方式，您需要让它在所有的浏览器上，您将不得不摆弄它一点。
这个站点有一些很好的例子：
http://www.brunildo.org/test/html_body_0.html
http://www.brunildo.org/test/html_body_11b.html
Stack Overflow用户
发布于 2014-06-02 10:08:51
我将尝试直接在标题中回答这个问题，而不是死心塌地地在页面底部粘贴页脚。
如果没有足够的内容填充可用垂直浏览器视口，则将div扩展到页面底部：
演示地址：(拖动框架手柄查看效果)：http://jsfiddle.net/NN7ky
(优点:干净，简单。缺点:需要flexbox - )
HTML：
<body>
<div class=div1>
div1<br>
div1<br>
div1<br>
</div>
<div class=div2>
div2<br>
div2<br>
div2<br>
</div>
</body>CSS:
* { padding: 0; margin: 0; }
html, body {
height: 100%;
display: flex;
flex-direction: column;
}
body > * {
flex-shrink: 0;
}
.div1 { background-color: yellow; }
.div2 {
background-color: orange;
flex-grow: 1;
}答-答-或者我只是太困了
Stack Overflow用户
发布于 2008-09-29 04:47:20
尝试使用以下css规则：
#content {
min-height: 600px;
height: auto !important;
height: 600px;
}更改高度以适合您的页面。为了实现跨浏览器的兼容性，提到了两次height。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/147528
复制相关文章
相似问题