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 { height: 100%; }

来自你的 CSS。