将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

你真的非常接近答案.但是,您不能简单地将#wrapperdiv 设置为100%高度.你应该包括这一行:

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

目前,问题是wrapperdiv不知道什么是100%.它需要一个具有已定义高度的父级,它来自html和body元素.

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