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

{CSS}文件的height: auto !important;附近的146。

它覆盖了你的包裹的100％高度，这不会让你的主要成长。由于您的页脚具有恒定的高度，我会尝试在包装器中添加填充以使主要内容不会进入页脚，这就是当您转动height: auto !important;时会发生的情况。

Answer 2

将display:inline-block添加到#main（或#wrapper，具体取决于您要执行的操作）。带有display:block的项目（例如默认情况下为div或p标签）具有100％的宽度和高度，可根据内容进行调整。