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％的宽度和高度，可以根据内容进行调整。