CSS 页脚不会粘在页面底部答案

【问题标题】：CSS footer doesn't stick to the bottom of the pageCSS 页脚不会粘在页面底部
【发布时间】：2012-05-07 11:35:28
【问题描述】：

我在我的 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>

【问题讨论】：

不相关，但 #left 的 float:left: 带有冒号而不是分号。
这是一个为各种 div 提供颜色的小提琴，所以它更容易玩。 jsfiddle.net/eQCVC 我把float:left: 改成了float:left;。

标签： css positioning footer sticky-footer

【解决方案1】：

我相信你不见了

html { 高度：100%; }

来自您的 CSS。

【讨论】：

【解决方案2】：

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

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

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

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

总结一下，#footer 不能嵌套，html 需要 height: 100%;

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

希望对您有所帮助！劳里

【讨论】：

他不想要一个固定的页脚。
是的，没关系。只是给出一个解决方案和一个想法；）劳里！

【解决方案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;
}

【讨论】：

【解决方案4】：

您可能需要选择另一种方法。我使用这种方法将页脚粘贴到底部Stick Footer to bottom with help of CSS3。它仅适用于现代浏览器）对于其他“优雅降级”作品，内容仍然可以访问。

【讨论】：

【解决方案5】：

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

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

【讨论】：