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％的高度和最小高度应该可以工作。

网站： http://www.dentistrywithsmiles.com 非常感谢您提前帮助。

- blackessej

Answer 1

问题出在你的 CSS 文件第 146 行附近的 height: auto !important;。

它覆盖了包装器的 100% 高度，这不允许主 div 增长。由于页脚高度是固定的，我建议尝试向包装器添加填充以使主内容 div 不会影响页脚，当你关闭 height: auto !important; 时就会发生这种情况。

- Blender

---

谢谢@Blender - 你能给一个添加padding的例子吗？如果我在#wrapper底部添加padding，它只会将我的页脚向下推，而我希望它保持粘性。 - blackessej

抱歉，我有很多事情要做，所以也许稍后我可以想出一些东西。如果您的内容div需要占据填满页面的高度，并且不允许页脚爬到页面高度之上，为什么要使用固定页脚？您只需为该div指定最小高度即可，因为它已经将页脚div向下推。只是在思考... - Blender

这可能并不是完全必要的，但我想保留粘性页脚，以便如果页面没有太多内容，内容“div”无论在什么屏幕分辨率和浏览器下都能与页脚相遇。这对客户来说很重要。 - blackessej

Answer 2

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

- Mark Rose