CSS - 高度：100% vs 最小高度：100%;

Question

在我的代码中，我有一个固定页脚。这个固定页脚具有#wrap容器，并且min-height为100%。但是，在wrap div内部的对象上使用height：100%是无效的。

因此，我添加了height：100%，但它会影响布局，使得当窗口高度过小时，页脚会滚动到wrap div中的内容上方。

是否有任何解决方法？

<div id="wrap">
    <div id="main">
        <div id="content">

        </div>
    </div>
    <div class="clearfooter"></div>
</div>
<div id="footer">

</div>

CSS：

*{
    padding: 0px;
    margin: 0px;
}
html, body {
    height: 100%;
}
body{
    color: #FFF;
    background-image:url('../images/black_denim.png');
}
#wrap {
    min-height: 100%;
    margin-bottom: -200px;
    position: relative;
}
#topBanner{
    width: 200px;
    margin: 0px auto;
}
.clearfooter {
    height: 200px;
    clear: both;
}
/* footer */
#footer { 
    position: relative;
    height: 200px;
    width: 100%;
    min-width: 960px;
}

- Cow

---

我也知道你可以使用 position:absolute;top:0;bottom:0; 来实现这个效果，但是由于它是绝对定位的，如果页脚太小，它仍然会像内容不存在一样。 - Cow

Answer 1

如果您只需要一个粘性页脚，不会覆盖任何正文内容，那么只需将页脚设置为固定位置，并在正文底部添加与页脚高度相等的填充即可。

body{ 
    padding-bottom:200px;
}

#footer { 
    position: fixed;
    bottom:0;
    height: 200px;
    width: 100%;
}

编辑：

如果您的问题是在非常小的屏幕上，固定的页脚会覆盖大部分屏幕，则除了使用CSS媒体查询或JavaScript动态隐藏页脚之外，没有解决方法。

许多移动浏览器不支持固定位置，正是因为它们会覆盖屏幕的大部分内容。

- jkofron.e

---

那样做不行，因为你仍然可以把窗口缩小到足以覆盖它。 - Cow

即使将fixed更改后，它仍无法工作。你没有理解我的问题。我发布的代码可以很好地使页脚在超出任何内容之前停止。但是，由于min-height:100%;的存在，该代码不允许在包裹内使用height:100％;。但是，没有min-height，该代码无法工作，这就是我的问题所在。 - Cow

你说得对，我可能没有理解问题。如果您能发布一个包含更完整内容的链接，那么我可能会更有用。 - jkofron.e