2

我有一个网站，当没有足够的内容时，页脚会向上移动并且不会粘在底部。我试图弄清楚如何使页脚和页眉之间的 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 当您使用侧面菜单进入宽屏模式时，您可以明白我的意思。

4

2 回答 2

10

您实际上非常接近答案。但是，您不能简单地将#wrapperdiv 设置为 100% 高度。你应该包括这一行：

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

目前，问题是wrapperdiv 不知道什么是 100%。它需要一个具有定义高度的父级，该高度来自htmlandbody元素。

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

于 2013-03-16T20:32:04.513 回答
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>
于 2013-03-16T23:22:59.927 回答