如何让短内容页面到达浏览器窗口底部，然后出现页脚

Question

在这种情况下，我为这个 Web 应用程序开发了一个 CSS 代码。有时生成的数据太小，网站的页脚出现在页面中间，看起来很奇怪。

我想将背景的空白推到浏览器的底部，然后是页脚。如果页面很长，则该文本不会被页脚重叠。

有人可以在这里帮我处理这段代码吗？

我一直在尝试使用我在此页面上找到的一些代码：http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page 谈到了几乎相同的问题，但我无法完全完成：
什么是我做错了吗？

@charset "utf-8";
body {
    margin: 0;
    padding: 0;
    text-align: center;
    height:100%;
    position: relative;
    height:100%; /* needed for container min-height */
    }
.spacer {
    clear: both;
    height: 0;
    margin: 0;
    padding: 0;
    font-size: 0.1em;
}
.spacer_left {
    clear: left;
    margin: 0 0 10px 0;
    padding: 0;
    font-size: 0.1em;
}
hr {
    height: 1px;
    margin: 20px 0 20px 0;
    border: 0;
    color: #ccc;
    background: #ccc;
}
#container {
    position:relative; /* needed for footer positioning*/
    height:auto !important; /* real browsers */
    height:100%; /* IE6: treaded as min-height*/
    min-height:100%; /* real browsers */

    width: 1160px;  /* width of the site ! */
    margin: 0 auto;
    padding: 0;
    border: 1px solid #333;
    text-align: left;
}
/* Context Bar */ 
h1#contexto {
    background:url('../images/menubarbg2.png');
    width:1160px;
    height:30px;
    position:relative;
    margin-top:10px;
    visibility: inherit;
    font-family:Arial, Helvetica, sans-serif;
    font-size:12px;
}
#header {
    margin: 0;
    padding: 5px;
    height:70px;
}
h1#titulo {
    margin: 0;
    padding: 0 0 0;

}
#content {

 margin: -15px 20px 0 20px;
 /*padding: -6px 5px 20px 5px;*/
 padding:1em 1em 5em; /* bottom padding for footer */

}
div#content.columns {
    margin-left: 100px;
}
#content abbr, #content acronym {
    cursor: help;
    border-bottom: 1px dotted;
}
#content ul {
    list-style-type: square; 
}
#content ul li, #content ol li {
    margin: 0 0 0.4em 0;
    padding: 0; 
}
#content blockquote {
    width: 75%;
    margin: 0 auto;
    padding: 20px;
}

#footer  
{
 margin: 0;
 height: -30px;
 padding: 5px;
 clear: both;
 bottom:0; 
 position:relative;
}

更新：解决方案

@charset "utf-8";
body, html {
    margin: 0;
    padding: 0;
    text-align: center;
    position: relative;
    height:100%; /* needed for footer positioning*/
}
.spacer {
    clear: both;
    height: 0;
    margin: 0;
    padding: 0;
    font-size: 0.1em;
}
.spacer_left {
    clear: left;
    margin: 0 0 10px 0;
    padding: 0;
    font-size: 0.1em;
}
hr {
    height: 1px;
    margin: 20px 0 20px 0;
    border: 0;
    color: #ccc;
    background: #ccc;
}
#container {
    position:relative; /* needed for footer positioning*/
    min-height: 100%;/* needed for footer positioning*/
    height: auto !important;/* needed for footer positioning*/
    height: 100%;/* needed for footer positioning*/
    margin: 0 auto -30px;/* needed for footer positioning*/
    width: 1160px;
    padding: 0;
    border: 1px solid #333;
    text-align: left;
}
#header {
    margin: 0;
    padding: 5px;
    height:70px;
}
h1#titulo {
    margin: 0;
    padding: 0 0 0;
}
h1#contexto {
    background:url('../images/menubarbg2.png');
    width:1160px;
    height:30px;
    position:relative;
    margin-top:10px;
    visibility: inherit;
    font-family:Arial, Helvetica, sans-serif;
    font-size:12px;
}
#content {
    margin: -15px 20px 30px 20px; /* needed for footer positioning*/
}
div#content.columns {
    margin-left: 100px;
}
#content abbr, #content acronym {
    cursor: help;
    border-bottom: 1px dotted;
}
#content ul {
    list-style-type: square;
}
#content ul li, #content ol li {
    margin: 0 0 0.4em 0;
    padding: 0;
}
#content blockquote {
    width: 75%;
    margin: 0 auto;
    padding: 20px;
}
#footer, .push /* needed for footer positioning*/ {
    padding: 5px;
    clear: both;
    position:absolute;/* needed for footer positioning*/
    bottom:0;/* needed for footer positioning*/
    height: -30px;/* needed for footer positioning*/
    width:1150px;
}

Answer 1

您可以通过使正文高度等于浏览器窗口的高度（即：将高度设置为 100%），然后强制页脚位于浏览器窗口的任何高度的底部来获得“粘性页脚”是。

CSS：

body {
    height: 100%;
    position: relative;
}

#footer {
 position:absolute;
 bottom:0;
 height:60px;
 background:#ccc;
}

HTML：

<html><body>

 text here text here

 <div id="footer">
  Im in the footer and bottom of the page!
 </div>

</body></html>