Html 使 div 的高度适合屏幕高度并将页脚固定到底部
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15454279/
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
Fit height of div to screen height and fix footer to bottom
提问by Batman
I have a site where when there isn't enough content the footer moves up and doesn't stick to the bottom. Im trying to figure out how to make the div between the footer and the header stretch to the available space in order for the footer to remain at the bottom and not look like this:
我有一个网站，当没有足够的内容时，页脚会向上移动并且不会粘在底部。我试图弄清楚如何使页脚和页眉之间的 div 伸展到可用空间，以便页脚保持在底部而不是这样：
I've tried setting my heights to 100% it but does not work.
我试过将我的高度设置为 100% 但不起作用。
HTML:
HTML：
<div id="wrapper">
<div id="body_div">
<section id="main_section">
</section>
<aside id="sidebar">
</aside>
</div>
<footer id="footer">
© Copyright by SimKessy
</footer>
</div>
CSS:
CSS：
body{
width: 100%; /*always specify this when using flexBox*/
height:100%;
display: -webkit-box;
display: -moz-box;
display: box;
text-align:center;
-webkit-box-pack:center; /*way of centering the website*/
-moz-box-pack:center;
box-pack:center;
background:url('images/bg/bg9.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
}
#wrapper{
max-width: 850px;
display: -moz-box;
display: -webkit-box; /*means this is a box with children inside*/
-moz-box-orient:vertical;
-moz-box-flex:1;
-webkit-box-orient:vertical;
-webkit-box-flex: 1; /*allows site to grow or shrink 1 = flex 0 = statix*/
background: rgba(0,0,0,0.7);
height:100%;
z-index: 1;
}
#body_div{
display: -webkit-box;
-webkit-box-orient:horizontal;
display: -moz-box;
-moz-box-orient:horizontal;
color:#000000;
margin-top: 190px;
height: 100%;
}
#main_section{
/* border:1px solid blue;*/
-webkit-box-flex: 1;
-moz-box-flex:1;
margin: 20px;
padding: 0px;
height:100%;
width: 100%;
}
This is my site http://www3.carleton.ca/clubs/sissa/html5/video.htmlYou can see what I mean when you go to widescreen mode using the side menu.
这是我的网站http://www3.carleton.ca/clubs/sissa/html5/video.html当您使用侧边菜单进入宽屏模式时，您可以看到我的意思。
回答by Shrey Gupta
You're actually really close to the answer. However, you cannot simply set only the #wrapperdiv to 100% height. You should include this line:
你实际上非常接近答案。但是，您不能简单地仅将#wrapperdiv设置为 100% 高度。你应该包括这一行：
html, body, #wrapper {
width:100%;
height:100%;
}
Currently, the issue is that the wrapperdiv has no clue what is 100%. It needs a parent with a defined height, which comes from the htmland bodyelements.
目前，问题是wrapperdiv 不知道什么是 100%。它需要一个具有定义高度的父级，该高度来自html和body元素。
As for the sticky footer, just use absolute positioning and set bottom:0px;. Don't use a 3rd party API for this; using position:absoluteis a ridiculously easy fix, and adding a 3rd party API will just slow down your site.
至于粘性页脚，只需使用绝对定位并设置bottom:0px;。不要为此使用第 3 方 API；使用position:absolute是一个非常简单的修复方法，添加 3rd 方 API 只会减慢您的网站速度。
回答by LRA
You can use jquery to calculate the needed height:
您可以使用 jquery 来计算所需的高度：
- set the margin to 0 for body
- then use the following script:
- 将正文的边距设置为 0
- 然后使用以下脚本：
<script type="text/javascript">
$(document).ready(function(){
var clientHeight = document.documentElement.clientHeight;
$('#wrapperHeight').height(clientHeight+'px');
var bodyHeight = clientHeight - $('#body_div').css("marginTop").replace('px', '') - $('#footer').outerHeight(true);
$('#body_div').height(bodyHeight+'px');
});
</script>
