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%）时，该值与父容器相关，而不是元素的内容。如果您不需要支持IE6，您可能会发现使用position: fixed作为页脚更容易实现。

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

Answer 2

添加 {h}的height 100% 和 height auto body会在页面不够长时正确调整

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

2 个答案: