将div的高度适合屏幕高度并将页脚固定到底部

我有一个网站，当页面没有足够的内容时，页脚向上移动并且不会粘到底部。我试着去弄清楚如何使脚注和头部伸展的可用空间之间的DIV为了使页脚留在底部，不可能是这个样子：将div的高度适合屏幕高度并将页脚固定到底部

enter image description here

我试着将我的身高设置为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 你可以明白我的意思，当你去使用侧面菜单宽屏模式。

来源

2013-03-16 Batman

谷歌粘页脚它展示了如何让你的网站页脚粘贴到页面底部。 – npage 2013-03-16 20:26:21

嘿，对不起，解决方案有点让事情变得最糟糕。 – Batman 2013-03-20 05:18:04

啊。如果仍有问题，我可以编辑我的解决方案。可以详细说明下面的解决方案的问题是什么？如果需要，我会很高兴添加一些新的修补程序。 – 2013-03-20 05:19:45

你其实很接近答案。但是，您不能简单地将#wrapper div设置为100％的高度。你应该有这样一行：

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

目前，该问题是wrapper div有什么线索是100％。它需要一个具有定义高度的父项，它来自html和body元素。

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

来源

2013-03-16 20:32:04

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

设置margin为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-16 23:22:59 LRA

你可以做到这一点...但它比CSS复杂得多。为什么在使用JavaScript内置CSS时使用JavaScript？ – 2013-03-17 17:06:03

将div的高度适合屏幕高度并将页脚固定到底部

回答

相关问题