將2 divs延伸到頁面底部

我一直在努力工作幾個小時，並嘗試了所有我能想到/發現的工作。我希望我的網站的內容和側邊欄div擴展到粘性頁腳。將2 divs延伸到頁面底部

與CSS：

body, html { 
    position: absolute; 
    left: 0px; 
    right: 0px; 
    bottom: 0px; 
    top: 0px;  
    min-height: 100%; 
    height: 100%; 
    line-height: 1; 
    } 

body { 
    min-height: 100%; 
    height: 100%; 
    font-family: 'Century Gothic', sans-serif; 
    font-size: 13px; 
    line-height: 21px; 
    background: #e0d6b6 url(images/bg.png) repeat-x; 
    color: #2f2f2f; 
    -webkit-font-smoothing: antialiased; 
    -webkit-text-size-adjust: 100%; 
    } 

.container { 
    position: absolute; 
    left: 0px; 
    right: 0px; 
    bottom: 0px; 
    top: 0px; 
    width: 100%; 
    min-height: 100%; 
    height: auto !important; 
    height: 100%; 
    background: transparent; 
    margin: 0 auto -30px; 
    padding: 0px; 
    } 

.contentwrapper { 
    position: relative; 
    display: block; 
    min-height: 100%; 
    height: auto !important; 
    height: 100%; 
    margin: 0 5%; 
    } 

#content, 
#sidebar { 
    position: relative; 
    padding: 20px; 
    background: #ffffff; 
    min-height: 100% !important; 
    height: 100% !important; 
    display: block; 
    position: relative; 
    overflow: auto; 
    } 

#content { 
    min-width: auto; 
    width: auto; 
    margin: 0 0 auto 0; 
} 

#sidebar { 
    margin: 0 0 auto 2% !important; 
    width: 150px; 
    float: right; 
    } 

.footer, .push { 
    clear: both; 
    height: 30px; 
    } 

#footer { 
    display: block; 
    bottom: 0px; 
    position: relative; 
    width: 100%; 
    margin: 0px; 
    padding: 10px 0; 
    font-size: 12px;  
    border: none; 
    background: #808080; 
    color: #c4c4c4; 
    vertical-align: middle; 
    }

與HTML：

<html> 
<head> 
</head> 
<body> 
<div class="container"> 
<div class="contentwrapper"> 
<div id="sidebar">sidebar</div> 
<div id="content">  
content 
</div><!--content--> 
</div><!--contentwrapper--> 
<div id="push"></div> 
<div id="footer"> 
footer 
</div> <!--footer--> 
</div><!--container--> 
</body> 
</html>

該網站是http://hoskyns50.co.uk如果你想看到的原始代碼。我正在適應現有的Wordpress佈局。提前致謝。

來源

2013-07-08 user2561163

卸下height: auto !important;您.contentwrapper

，因爲你想要的是height: 100%;。您的height: auto !important;覆蓋了您的height: 100%;。

編輯

要解決你的頁腳問題

更改您的#footer位置

position: fixed;

，而不是

position: relative;

但我不知道這是你想要的，因爲不是頁腳會跟隨你的滾動。

小提琴：http://jsfiddle.net/xHJA4/

來源

2013-07-08 15:24:05 Timber

非常感謝你！阿格不敢相信那很簡單。它確實搞砸了我的頁腳，儘管如此，我怎麼才能把它粘到底部呢？ – user2561163

@ user2561163我編輯了我的答案，試圖修復您的頁腳。 :) – Timber

我寧願沒有總是可見的頁腳，像一個菜單，在固定的位置......但無論如何感謝我現在有問題，內容div並不總是足夠大，以擴展文本和創建一個滾動條。如果我設置了溢出：隱藏; 那麼內容並不總是可見的。 – user2561163

將2 divs延伸到頁面底部

回答

相關問題