將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的高度適合屏幕高度並將頁腳固定到底部

回答

相關問題