Question

所以在我的代码中我有一个粘性页脚。粘性页脚的#wrap容器的min-height为100%。但是使用min-height时，您无法在wrap div中的对象上使用height:100%。

所以我添加了height:100%，但是当窗口高度太小时，通过使页脚滚动覆盖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;
}

Answer 1

如果您需要的是一个粘性页脚，它不会覆盖任何身体的内容，那么只需将页脚放置一个固定的位置，并使身体填充的底部等于页脚高度。

body{ 
    padding-bottom:200px;
}

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

编辑：

如果你担心的是在非常小的屏幕上，固定的页脚覆盖了大部分屏幕，那么除了可能使用css媒体查询或javascript动态隐藏页脚之外没有解决方法。

许多移动浏览器不能正确支持固定位置，因为它们覆盖了大部分屏幕。

CSS - 身高：100％vs min-height：100％;

1 个答案: