即使没有内容，高度为 100% 的 DIV 也太高了

Question

我正在尝试实现一个 sticky footer，它正在工作，除了主包装 div 的 100% 高度延伸得太高（#body-wrap）并且它在内容和页脚之间造成了巨大的差距。因此，我必须将页面向下滚动到巨大的空白处才能查看它。

我的 HTML 是这样的：

<div id="body-wrap">

    <div id="content">

             [about 100px of content here]

    </div><!-- end #content -->

<div class="push"></div>

</div><!-- end #body-wrap -->

<div id="footer-wrap">

    <div id="footer-content">

              [about 300px of content here]

    </div> <!-- end #footer-content -->

</div> <!-- end #footer-wrap -->

还有我的 CSS：

html, body {
height: 100%;
}

#body-wrap {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -300px; /* the bottom margin is the negative value of the footer's   height */
 }

.footer-main-wrap, .push {
height: 300px; /* .push must be the same height as .footer */
}

有人知道为什么 100% 的高度会比内容延伸得更远吗？

Answer 1

添加 height 100% 到你的 html 和 height auto 到您的 body 将使其在页面不够长时正确调整

Answer 2

当您将高度指定为百分比时（例如，height: 100%），这与 父 容器有关，而不是元素的 内容。如果您不需要支持 IE6，您可能会发现使用 position: fixed 作为页脚更容易实现。

---

编辑：我刚刚注意到另一件事 - 在您的标记中，您有一个 ID 为 footer-wrap 的元素，但在您的 CSS 中，您使用的是选择器 .footer-main-wrap。尝试将 CSS 中的 .footer-main-wrap 更改为 #footer-wrap。