如何讓短內容頁面到達瀏覽器窗口底部，然後出現頁腳

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>