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

Question

我有一个网站，当内容不足时，页脚向上移动并且不会粘到底部。我试图弄清楚如何使页脚和标题之间的div伸展到可用空间，以便页脚保持在底部而不是这样：

我已经尝试将其高度设置为100％但不起作用。

HTML：

<div id="wrapper">

    <div id="body_div">
        <section id="main_section">
        </section>
        <aside id="sidebar">                    
        </aside>
    </div>
    <footer id="footer">
        &copy; Copyright  by SimKessy
    </footer>
</div>

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%;
}

这是我的网站http://www3.carleton.ca/clubs/sissa/html5/video.html 使用侧边菜单进入宽屏模式时，您可以看到我的意思。

Answer 1

你真的非常接近答案。但是，您不能简单地将#wrapper div设置为100％高度。你应该包括这一行：

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

目前，问题是wrapper div不知道什么是100％。它需要具有已定义高度的父级，该父级来自html和body元素。

对于粘性页脚，只需使用绝对定位并设置bottom:0px;。不要使用第三方API;使用position:absolute是一个非常简单的修复方法，添加第三方API只会减慢您的网站速度。

Answer 2

您可以使用jquery计算所需的高度：

• 为身体
设置边距为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>