Html 即使没有内容，如何强制 DIV 块扩展到页面底部？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/147528/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I force a DIV block to extend to the bottom of a page even if it has no content?
提问by Vince Panuccio
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.
在下面显示的标记中，我试图让内容 div 一直拉伸到页面底部，但只有在有内容要显示时才会拉伸。我想这样做的原因是，即使没有任何内容可显示，垂直边框仍会出现在页面下方。
Here is my HTML:
这是我的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>
And my CSS:
还有我的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;
}
采纳答案by Jason Hernandez
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:
你的问题不是 div 不是 100% 高度，而是它周围的容器不是。 这将有助于浏览器我怀疑你正在使用：
html,body { height:100%; }
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.
您可能还需要调整内边距和边距，但这将使您完成 90% 的工作。如果您需要使其适用于所有浏览器，您将不得不稍微处理一下。
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://www.brunildo.org/test/html_body_0.html
http://www.brunildo.org/test/html_body_11b.html
http://www.brunildo.org/test/index.html
I also recommend going to http://quirksmode.org/
回答by Gima
I'll try to answer the question directly in the title, rather than being hell-bent on sticking a footer to the bottom of the page.
我将尝试直接在标题中回答问题，而不是一心将页脚粘贴到页面底部。
Make div extend to the bottom of the page if there's not enough content to fill the available vertical browser viewport:
如果没有足够的内容来填充可用的垂直浏览器视口，则使 div 扩展到页面底部：
Demo at (drag the frame handle to see effect) : http://jsfiddle.net/NN7ky
(upside: clean, simple. downside: requires flexbox - http://caniuse.com/flexbox)
演示（拖动框架手柄查看效果）：http: //jsfiddle.net/NN7ky
（优点：干净、简单。缺点：需要 flexbox - http://caniuse.com/flexbox）
HTML:
HTML：
<body>
<div class=div1>
div1<br>
div1<br>
div1<br>
</div>
<div class=div2>
div2<br>
div2<br>
div2<br>
</div>
</body>
CSS:
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 - or i'm just too sleepy
ta-da - 或者我太困了
回答by Kevin Read
Try playing around with the following css rule:
尝试使用以下 css 规则：
#content {
min-height: 600px;
height: auto !important;
height: 600px;
}
Change the height to suit your page. height is mentioned twice for cross browser compatibility.
更改高度以适合您的页面。为了跨浏览器兼容性，两次提到高度。
回答by Owen
you can kinda hack it with the min-heightdeclaration
你可以用min-height声明来破解它
<div style="min-height: 100%">stuff</div>
回答by Anjisan
Try Ryan Fait's "Sticky Footer" solution,
试试 Ryan Fait 的“Sticky Footer”解决方案，
http://ryanfait.com/sticky-footer/
http://ryanfait.com/resources/footer-stick-to-bottom-of-page/
http://ryanfait.com/sticky-footer/
http://ryanfait.com/resources/footer-stick-to-bottom-of-page/
Works across IE, Firefox, Chrome, Safari and supposedly Opera too, but haven't tested that. It's a great solution. Very easy and reliable to implement.
适用于 IE、Firefox、Chrome、Safari 和据称的 Opera，但尚未测试。这是一个很好的解决方案。实施起来非常容易和可靠。
回答by Steph
Try:
尝试：
html, body {
height: 102%;
}
.wrapper {
position: relative;
height: 100%;
width: 100%;
}
.div {
position: absolute;
top: 0;
bottom: 0;
width: 1000px;
min-height: 100%;
}
Haven't tested it yet...
还没有测试过...
回答by Gene
The min-height property is not supported by all browsers. If you need your #content to extend it's height on longer pages the height property will cut it short.
并非所有浏览器都支持 min-height 属性。如果您需要 #content 在较长页面上扩展其高度，height 属性会将其缩短。
It's a bit of a hack but you could add an empty div with a width of 1px and height of e.g. 1000px inside your #content div. That will force the content to be at least 1000px high and still allow longer content to extend the height when needed
这是一个小技巧，但您可以在#content div 中添加一个宽度为1px 高度为例如1000px 的空div。这将强制内容至少为 1000px 高，并且仍然允许更长的内容在需要时扩展高度
回答by Adam Franco
While it isn't as elegant as pure CSS, a small bit of javascript can help accomplish this:
虽然它不像纯 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>
回答by David Horák
Sticky footer with fixed height:
固定高度的粘性页脚：
HTML scheme:
HTML 方案：
<body>
<div id="wrap">
</div>
<div id="footer">
</div>
</body>
CSS:
CSS：
html, body {
height: 100%;
}
#wrap {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -60px;
}
#footer {
height: 60px;
}
回答by Vinicius José Latorre
Try http://mystrd.at/modern-clean-css-sticky-footer/
试试http://mystrd.at/modern-clean-css-sticky-footer/
The link above is down, but this link https://stackoverflow.com/a/18066619/1944643is ok. :D
上面的链接挂了，但是这个链接https://stackoverflow.com/a/18066619/1944643 没问题。:D
Demo:
演示：
<!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>
