css - CSS 页脚不会粘在页面底部

Question

我在我的 CSS 布局中设置粘性页脚时遇到了一些困难。我一直在尝试采用http://www.cssstickyfooter.com/的想法，但如果 div 中的内容不够高，页脚不会停留在页面底部。

该css文件：

* {
 margin:0;
 padding:0;
 } 

body {
 height:100%; 
 margin:0px; 
 padding:0px;
 }

#wrap {
 min-height: 100%;
 }

#container {
 overflow:auto;
 padding-bottom: 150px;
 text-align:left;
 width:800px;
 margin:auto;
 }

#header {
 height:240px; 
 margin-top:20px;
}

#navigation {
 float:left; 
 width:800px; 
 margin-top:20px;
}

#content-container {
 float:left;
 width: 800px;
}

#left {
 clear:left; 
 float:left: 
 width:480px; 
 height: auto;
 margin: 20px 0px 20px 0px;
 padding: 20px 10px 20px 10px;
}

#right {
 float:right; 
 width:275px; 
 height:auto;
 margin: 20px 0px 20px 0px;
 padding: 20px 10px 20px 10px; 
}

#footer {
 position: relative;
 clear:both;
 height:150px;
 margin-top: -150px;
}

#columns {
 width:800px;
 height:150px;
 margin:auto;
}

#colleft {
 float:left;
 width:400px;
 height:150px;
}

#colright {
 float:right;
 position:relative;
 width:260px;
 height:150px;
}

html文件：

<div id="wrap">

    <div id="container">

        <div id="header"></div>

        <div id="navigation">

            <div id="lang"></div>

        </div>

        <div id="content-container">

            <div id="left"></div>

            <div id="right"></div>

        </div>

    </div>

    <div id="footer">

        <div id="columns">

            <div id="colleft"></div>

            <div id="colright"></div>

        </div>
</div>

Answer 1

我相信你不见了

html { 高度：100%; }

来自你的 CSS。

Answer 2

您是否考虑过使用位置：固定？

#footer { position: fixed; bottom: 0px; height:150px; }

您的示例不起作用的原因是因为您的#footer 在 #wrap 内，使用该 CSS #footer 必须在 wrap 之外，因为它是将 min-height 设置为 100% 的 wrap 和 #使用负边距将页脚向上拉。

html 标签也需要 100% 的高度才能工作。

所以回顾一下，#footer 不能嵌套，html 需要 height: 100%;

此处示例 --- http://jsfiddle.net/CK6nt/

希望有帮助！劳里

Answer 3

在您的页脚类中：

#footer {
position: relative;
clear:both;
height:150px;
margin-top: -150px;
}

更改position: relative;为，position:fixed因此该类应如下所示：

#footer {
position: fixed;
clear:both;
height:150px;
margin-top: -150px;
}

Answer 4

对我来说一切都很好，您只需要添加position :absolute页脚，以便将页脚放置在正常文档流之外，bottom:0并帮助您将页脚带到页面下方。

#footer {
position:absolute;
bottom:0;
}