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

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; 
} 

UPDATE：解决方案

@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>