CSS：將內容div拉伸到頁腳div並水平對齊

我試圖抓住位於菜單下方的div，將其拉伸到頁腳（如果沒有足夠的內容），並將其居中。我可以用絕對定位來拉伸它，但它不會居中;我可以將它集中，但它不會伸展。該代碼看起來是這樣的：CSS：將內容div拉伸到頁腳div並水平對齊

HTML

<div id="container"> 
    <div id="header"></div> 
    <div id="content"></div> 
    <div id="footer"></div> 
</div>

CSS

html, body { 
    height: 100%; 
    margin: 0; 
    padding: 0; 
} 

#container { 
    min-height: 100%; 
    position: relative; 
} 

#header { 
    background: #111; 
    width: 500px; 
    height: 125px; 
    margin: auto; 
} 

#content { 
    width: 500px; 
    height: 100%; 
    background: #666; 
} 

#footer { 
    position: absolute; 
    bottom: 0; 
    background: #111; 
    width: 100%; 
}

這是我在Inkscape創作作爲例子的影像：http://www.tiikoni.com/tis/view/?id=46baeba

我可以找到答案如何將內容div拉伸到底部，但就是這樣。除非我絕對需要，否則我不想使用JavaScript/JQuery。

來源

2014-04-29 zeroslash

如果你正在做的事情你的方式設置（設置爲position: absolute; bottom: 0;頁腳），你可以這樣做：

#footer { 
    position: absolute; 
    bottom: 0; 
    background: #111; 
    width: 100%; 
    height: 50px; // or whatever height you want 
} 
#content { 
    width: 500px; 
    background: #666; 
    margin: 0px auto; 
    position: absolute; 
    top: 125px; // same height as header 
    bottom: 50px; // same height as footer 
    left: 0; 
    right: 0; 
    margin: auto; 
}

的jsfiddle：http://jsfiddle.net/g2y9Y/

不過，我想你在做什麼試圖實現，設置絕對定位可能是一個壞主意。你確定你的內容永遠不會超過用戶瀏覽器高度的100％嗎？爲什麼不簡單設置內容上的min-height？類似這樣的：http://jsfiddle.net/g2y9Y/1/

來源

2014-04-29 04:23:13

我沒有設置使用除CSS3以外的任何東西。而且我知道我的內容可能會填滿屏幕，但在極少數情況下，我不想做好準備。至於你的建議，它的工作原理是我不會在包含更多內容的頁面上向下滾動。 – zeroslash

另外，如果我絕對需要，我不介意使用JavaScript/JQuery。我只是喜歡一個CSS解決方案。 – zeroslash

YOu可以試試這個fiddle。我發現它在這裏 - CSS Layout Help - Stretch div to bottom of page

#wrap { min-height: 100%;background-color:gray;} 
#main { 
    overflow: auto; 
    padding-bottom: 53px; /* must be same height as the footer */ 
    background-color: red; 
    height: 90% 
} 
#footer { 
    position: relative; 
    margin-top: -53px; /* negative value of footer height */ 
    height: 33px; 
    line-height: 33px; 
    border-bottom:20px solid #fff; 
    text-align: center; 
    background-color:blue; 
}

來源

2014-04-29 04:55:34 Orahmax

CSS：將內容div拉伸到頁腳div並水平對齊

回答

相關問題