內容div沒有根據需要調整大小

我的網頁上有以下三個div！內容div沒有根據需要調整大小

#header { //top div 
height: 60px; 
min-width: 1024px; 
background-image: url(../images/header_bg.jpg); 
background-repeat: repeat-x; 
display: block; 
} 

#content { //middle div 
min-width: 1024px; 
min-height: 585px; 
} 

#buttons { //bottom div 
min-width: 1024px; 
height: 120px; 
max-height: 120px; 
background-color: rgba(229, 229, 255, 0.76); 
}

example picture

所示的圖像中，當分辨率的變化，內容的div不會擴展！我怎樣才能使內容div擴大到適合頁面大小！沒有得到任何垂直滾動！

來源

2013-04-30 Imesh Chandrasiri

所以你說你想要的按鈕堅持到瀏覽器窗口的底部？在這種情況下，你可能想要所謂的「粘腳」。 – 2013-04-30 08:39:14

假設我通過將位置設置爲絕對底部來選擇粘性頁腳。然後內容會錯過按鈕div，並將繼續自我展開！不是嗎？ – 2013-04-30 08:42:03

不，粘腳不僅涉及更多。無論如何，定位頁腳絕對不是一個好方法，並且不會導致內容區域變長。這裏有一個很好的指導，以正確地做一個粘性的頁腳：[鏈接]（http://www.sitepoint.com/forums/showthread.php?171943-CSS-FAQ-Tips-etc-Please-read-before-posting！＆p = 1239966＃post1239966） – 2013-04-30 08:45:22

說你想你的頭和按鈕有一個固定的寬度，你可以用你的內容做到這一點：

#header.row { height: 60px; top: 0; } 
#content.row { top: 60px; bottom: 120px; border: 1px solid black;} 
#buttons.row { height: 120px; bottom: 0; }

http://jsfiddle.net/5hx5v/

來源

2013-04-30 08:34:59

標題和按鈕都可以！但問題是，當決議更改時，內容不會相應地調整大小，並且按鈕不會被推到底部！我該如何解決這個問題？ – 2013-04-30 08:39:09

是不是我上面發佈的內容...？ – 2013-04-30 08:42:47

不，它不會重新調整大小！ – 2013-04-30 08:45:46

給你有一個固定的高度頁腳和頭，你能達到什麼你想用下面的HTML和CSS

HTML

<div id="wrapper"> 
    <div id="header"> 
    </div> 
    <div id="content"> 
    </div> 
    <div id="buttons"> 
    </div> 
</div>

CSS

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

#wrapper {padding:60px 0 120px 0; position:absolute; top:0; bottom:0; left:0; right:0;} 
#content {min-height:100%;} 
#header {margin-top:-60px; height:60px;} 
#buttons {margin-bottom:-120px; height:120px;}

Example

來源

2013-04-30 09:12:28 Pete

內容div沒有根據需要調整大小

回答

相關問題