HTML divs：自動高度和溢出：自動？

我想設計一個網站，其中包括一個內容區溢出：自動和動態高度。優選地，我希望能夠將頂部和底部放在溢出下方：auto div，並讓該div佔據剩餘空間，但到目前爲止這已證明很困難。高度：自動不起作用，溢出：自動需要一個高度，所以我不能不設置它。有任何想法嗎？我的代碼可以在這裏找到：http://abbottconstruct.com/wp-content/themes/abbott/index.html HTML divs：自動高度和溢出：自動？

感謝任何人的幫助。

來源

2010-09-13 Smartboy

你是什麼動力高度呢？ – Tgr 2010-09-13 00:40:43

您是否試圖使頁眉和頁腳始終可見，如卡在屏幕上？試試位置固定。如果您只是希望頁腳位於頁面的底部，無論視口有多高，請參閱http://ryanfait.com/sticky-footer/ – Keyo 2010-09-13 01:26:51

爲了使CSS百分比高度起作用，元素的父級必須定義高度。因此，我們可以用下面的標記做：

<body>  
    <div id="content"> 
     <div id="header">Header</div> 
     <div id="text"> 
      Text content of your page 
     </div> 
    </div> 
    <div id="footer">Footer</div>  
</body>

所有除頁腳中的網站的內容包含在#content元素。這然後使用min-height: 100%聲明始終至少是其父項高度的100％。由於它的父母是身體並且有身高聲明，所以這可以按預期工作。

最後，頁腳被帶入一個負邊距的視圖中，填充底部被添加到#text元素，因此其內容不會意外重疊。

的CSS如下：

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

#content { 
    min-height: 100%; 
    /* IE6 will need height: 100% defined in an IE6 only stylesheet */ 
} 

#header, #footer { 
    height: 100px; 
}  

/* Bring the footer into view */ 
#footer { 
    margin-top: -100px;  /* footer's height */ 
} 

/* Make sure footer doesn't overlap #text element */ 
#text { 
    padding-bottom: 100px; /* footer's height */ 
}

你可以看到它in action here。如果添加更多填充文字，您會看到頁腳正確地被壓下。

來源

2010-09-13 00:56:38 Pat

這不是我遇到問題的百分比高度。我希望可以調整內容分區的大小以自動填充兩個側邊欄和頁眉和頁腳之間的空間。在我的頁面上，您可以看到div被推到白色和側邊欄停止的位置，而我希望它與這些位置相同。我曾嘗試添加填充，但它不起作用，實際上它只是將白色和側邊欄推得更遠。負填充什麼都不做，也沒有添加空白。任何其他想法？ :) – Smartboy 2010-09-13 03:13:30