Html 将div的高度调整到屏幕高度，并将页脚固定到底部

我有一个网站，当没有足够的内容时，页脚会向上移动，而不会粘到底部。我正在试图找出如何使页脚和页眉之间的div延伸到可用空间，以便页脚保持在底部，而不是像这样：

我试着将我的身高设定为100%，但没有成功

HTML:

这是我的网站

---

当您使用侧边菜单进入宽屏模式时，您可以了解我的意思

事实上，你已经非常接近答案了。但是，不能简单地将

#wrapper

div设置为100%高度。您应该包括这一行：

html, body, #wrapper {
width:100%; 
height:100%;
}

目前，问题是

包装器
div不知道什么是100%。它需要一个具有定义高度的父级，该高度来自
html
和
body
元素

对于粘性页脚，只需使用绝对定位，并设置
bottom:0px。不要为此使用第三方API；使用
position:absolute
是一个非常简单的修复方法，添加第三方API只会降低站点的速度。
您可以使用jquery计算所需的高度：


将body的边距设置为0
然后使用以下脚本：



$（文档）.ready（函数（）{
var clientHeight=document.documentElement.clientHeight；
$（'#wrapperHeight'）。高度（clientHeight+'px'）；
var bodyHeight=clientHeight-$（“#body_div”）.css（“marginTop”）.replace（'px'，”）-$（“#footer”）.outerHeight（true）；
$（'body'u div'）。高度（bodyHeight+'px'）；
});
Google sticky footer，它展示了如何将网站的页脚粘贴到页面底部。嘿，对不起，这些解决方案让事情变得更糟了。啊。如果仍然存在问题，我可以编辑我的解决方案。能否详细说明以下解决方案存在哪些问题？如果需要的话，我很乐意添加一些新的补丁。当然，这是我现在的网站：当你进入侧边菜单并将其设置为宽屏幕（请参见预告片页面）时，你可以看到所有东西都是如何向上移动的（如图所示）。我希望有一个不会调整身体高度的东西。你可以这样做……但它比CSS复杂得多。当JavaScript内置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%;
}

html, body, #wrapper {
width:100%; 
height:100%;
}

<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>