在下面显示的标记，我想要获取内容的div一路延伸到页面的底部，但如果有内容，以显示它只有拉伸。 我想这样做的原因是这样的垂直边界仍然出现下降，即使没有任何内容显示页面。
这是我的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;
}
Answer 1:
你的问题不是在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
http://www.brunildo.org/test/index.html
我还建议要http://quirksmode.org/
Answer 2:
我会尝试直接回答这个问题的称号，而不是一意孤行，坚持页脚到页面的底部。
让DIV延伸到页面的底部，如果没有足够的内容来填补现有的垂直浏览器窗口：
在演示（拖动框架手柄看到效果）： http://jsfiddle.net/NN7ky
（上行：干净，简单缺点：需要实现Flexbox - http://caniuse.com/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;
}
当当-或者我只是太困
Answer 3:
试着玩弄下面的CSS规则：
#content {
min-height: 600px;
height: auto !important;
height: 600px;
}
改变以适应你的页面的高度。 高度为跨浏览器兼容提到两次。
Answer 4:
你能有点用破解它最小高度声明
<div style="min-height: 100%">stuff</div>
Answer 5:
尝试瑞安既成事实的“粘性页脚”的解决方案，
http://ryanfait.com/sticky-footer/
http://ryanfait.com/resources/footer-stick-to-bottom-of-page/
整个IE，火狐，Chrome，Safari和歌剧据说作品太多，但还没有测试过。 这是一个很好的解决方案。 很容易和可靠的实现。
Answer 6:
最小-height属性不被所有的浏览器都支持。 如果你需要你的＃内容以延长它在更长的页面高度属性将剪短的高度。
这是一个黑客攻击的一位，但你可以用1px的宽度和例如1000像素的高度你的＃内容DIV中添加一个空div。 这将迫使含量至少为1000像素高，仍然需要时允许更长的内容扩展高度
Answer 7:
虽然它不是纯CSS优雅，JavaScript的一个小一点的可以帮助实现这一点：
<html>
<head>
<style type='text/css'>
div {
border: 1px solid #000000;
}
</style>
<script type='text/javascript'>
function expandToWindow(element) {
var margin = 10;
if (element.style.height < window.innerHeight) {
element.style.height = window.innerHeight - (2 * margin)
}
}
</script>
</head>
<body onload='expandToWindow(document.getElementById("content"));'>
<div id='content'>Hello World</div>
</body>
</html>
Answer 8:
尝试：
html, body {
height: 102%;
}
.wrapper {
position: relative;
height: 100%;
width: 100%;
}
.div {
position: absolute;
top: 0;
bottom: 0;
width: 1000px;
min-height: 100%;
}
没有测试尚未...
Answer 9:
粘页脚固定高度：
HTML格式：
<body>
<div id="wrap">
</div>
<div id="footer">
</div>
</body>
CSS：
html, body {
height: 100%;
}
#wrap {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -60px;
}
#footer {
height: 60px;
}
Answer 10:
我认为这个问题将只是固定使得HTML填补100％也可能是身体充满HTML的100％，但HTML不填满屏幕的100％。
试着用：
html, body {
height: 100%;
}
Answer 11:
尝试http://mystrd.at/modern-clean-css-sticky-footer/
上面的链接是向下，但这个环节https://stackoverflow.com/a/18066619/1944643是确定的。 ：d
演示：
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<meta name="author" content="http://mystrd.at">
<meta name="robots" content="noindex, nofollow">
<title>James Dean CSS Sticky Footer</title>
<style type="text/css">
html {
position: relative;
min-height: 100%;
}
body {
margin: 0 0 100px;
/* bottom = footer height */
padding: 25px;
}
footer {
background-color: orange;
position: absolute;
left: 0;
bottom: 0;
height: 100px;
width: 100%;
overflow: hidden;
}
</style>
</head>
<body>
<article>
<!-- or <div class="container">, etc. -->
<h1>James Dean CSS Sticky Footer</h1>
<p>Blah blah blah blah</p>
<p>More blah blah blah</p>
</article>
<footer>
<h1>Footer Content</h1>
</footer>
</body>
</html>
Answer 12:
你也可能会喜欢这个： http://matthewjamestaylor.com/blog/ultimate-2-column-left-menu-pixels.htm
这是不太你问什么，但它也可能满足您的需求。
Answer 13:
我没有代码，但我知道我这样做是用高度的组合一次：1000像素和下边距：-1000px; 尝试。
Answer 14:
根据您的布局是如何工作的，则可能是设置的背景脱身<html>元素，它总是至少视口的高度。
Answer 15:
这是不可能做到这一点只使用样式表（CSS）。 一些浏览器将不接受
height: 100%;
作为除浏览器窗口的视点的更高的值。
JavaScript是最简单的跨浏览器的解决方案，但如上所述，不干净或漂亮的一个。
Answer 16:
您可以使用“VH”长度单位的元素本身及其父母的最小高度属性。 它，因为IE9的支持：
<body class="full-height">
<form id="form1">
<div id="header">
<a title="Home" href="index.html" />
</div>
<div id="menuwrapper">
<div id="menu">
</div>
</div>
<div id="content" class="full-height">
</div>
</body>
CSS：
.full-height {
min-height: 100vh;
box-sizing: border-box;
}
Answer 17:
不是最好的，也不是最标准的最好实现，但你可以改变DIV的SPAN ......这是一个不那么可取，但快速修复= P =）
Answer 18:
我知道这是不是最好的方法，但我不能算出它不会弄乱我的头，菜单等位置。 所以....我使用的表为这两个colums。 这是一个快速解决方案。 没有JS需要;）
文章来源: How do I force a DIV block to extend to the bottom of a page even if it has no content?
