100％高度div

Question

我有一個#main div，當沒有內容時，我想在頁眉和頁腳之間填充頁面。 存在內容時，應將粘性頁腳向下推，確實如此。

CSS：

#main {
 background: transparent url("images/main-content.png") top right repeat-y;
 clear: both;
 overflow: hidden;
 margin-top: -10px;
 height: 100%;
 min-height: 100%;
}

我不確定為什么這行不通。 #main繼承自#wrapper和body ，所以我認為設置100％的高度和100％的最小高度會起作用。

現場：

http://www.dentistrywithsmiles.com

在此先感謝您的幫助。

Answer 1

就是那個height: auto !important; CSS文件第146行附近的某處。

它覆蓋了包裝器的100％的高度，這不會讓您的主div增長。 由於您的頁腳高度恆定，因此我將嘗試在包裝器中添加填充，以使主要內容div不會被頁腳占用，這是在您轉height: auto !important;時發生的情況height: auto !important; 。

Answer 2

將display:inline-block添加到#main （或#wrapper ，具體取決於您要執行的操作）。 具有display:block （默認情況下為div或p標簽）具有100％的寬度和高度，可以根據內容進行調整。