即使没有内容，如何强制DIV块扩展到页面底部？
https://stackoverflow.com/questions/147528
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian题
在下面显示的标记中，我试图让内容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;
}
解决方案
你的问题不是div不是100％的高度，而是它周围的容器不是。这对我怀疑你正在使用的浏览器有帮助：
html,body { height:100%; }
您可能还需要调整填充和边距，但这样可以让您获得90％的覆盖率。如果您需要让它适用于所有浏览器，您将不得不稍微处理它。
这个网站有一些很好的例子：
http://www.brunildo.org/test/html_body_0.html < BR>
http://www.brunildo.org/test/html_body_11b.html
http://www.brunildo.org/test/index.html
我还建议你去 http://quirksmode.org/
其他提示
我会尝试直接在标题中回答这个问题，而不是一直坚持将页脚粘贴到页面底部。
如果内容不足以填充可用的垂直浏览器视口，则将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;
}
ta-da - 或者我太困了
尝试使用以下css规则：
#content {
min-height: 600px;
height: auto !important;
height: 600px;
}
更改高度以适合您的页面。对于跨浏览器兼容性，提到两次高度。
你可以通过 min-height 声明
<div style="min-height: 100%">stuff</div>
尝试Ryan Fait的<！>“Sticky Footer <！>”;溶液，
http://ryanfait.com/sticky-footer/
http://ryanfait.com/resources/footer-stick-to汉字页外/
适用于IE，Firefox，Chrome，Safari以及据称也是Opera，但尚未测试过。这是一个很好的解决方案。实施起来非常简单可靠。
所有浏览器都不支持min-height属性。如果您需要#content在较长的页面上扩展它的高度，则height属性会缩短它。
这有点像黑客，但你可以添加一个宽度为1px且高度为1px的空div。 #content div中的1000px。这将迫使内容至少高出1000px，并且仍然允许更长的内容在需要时扩展高度
虽然它不像纯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>
尝试：
html, body {
height: 102%;
}
.wrapper {
position: relative;
height: 100%;
width: 100%;
}
.div {
position: absolute;
top: 0;
bottom: 0;
width: 1000px;
min-height: 100%;
}
尚未测试过......
固定高度的粘性页脚：
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;
}
我认为只需将html填充为100％即可解决问题， 可能是身体填充了100％的html，但html没有填满100％的屏幕。
尝试：
html, body {
height: 100%;
}
尝试 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>
您也可以这样： http：// matthewjamestaylor的.com /博客/最终-2-列左眼菜单pixels.htm
这不是你要求的，但它也可能适合你的需要。
我没有代码，但我知道我曾经使用高度组合一次：1000px和margin-bottom：-1000px;试试吧。
根据布局的工作方式，您可能会在<html>元素上设置背景，该元素始终至少是视口的高度。
仅使用样式表（CSS）无法实现此目的。有些浏览器不接受
height: 100%;
作为比浏览器窗口的观点更高的值。
Javascript是最简单的跨浏览器解决方案，尽管如上所述，并非干净或漂亮。
您可以使用<！>“; vh <！>”; length元素，用于元素本身及其父元素的min-height属性。自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;
}
不是最好的也不是最好的标准的最佳实现，但是你可以改变SPAN的DIV ...它不是那么值得推荐但快速修复= P =）
我知道这不是最好的方法，但是如果不弄乱我的标题，菜单等位置，我就无法理解。所以......我在这两列中使用了一个表格。这是一个快速修复。不需要JS;）
