CSS粘性页脚不工作

Question

我有一个简单的布局，我试图去使用CSS。顶部和底部的行高35px，动态大小的中心。我试图让置顶页脚使用本教程的工作：http://www.cssstickyfooter.com/using-sticky-footer-code.html

然而，不是页脚是在底部，无论内容中间的金额，我看到以下内容：

这里是我的CSS

html, body{ 
height: 100%; 
margin: 0; 
} 

body{ 
font-family: Arial,Verdana; 
font-size: 12px; 
} 

#site_wrapper{ 
width: 100% 
min-height: 100%; 
background-color: #fff; 
padding: none; 
} 

#top_bar{ 
clear: both; 
height: 35px; 
background-color: #1468b3; 
line-height: 35px; 
font-size: 14px; 
text-align: right; 
color: #fff; 
padding-right: 15px; 

} 

#content{ /* Content Wrapper */ 
clear: both; 
overflow: auto; 
padding-bottom: 35px; 
} 

#content_left{ 
float: left; 
width: 50%; 
color: #000; 
} 

#content_right{ 
float: right; 
width: 50%; 
color: #000; 
} 

#footer{ 
clear: both; 
position: relative; 
margin-top: -35px; /* negative value of footer height */ 
height: 35px; 
background-color: #1468b3; 
line-height: 35px; 
font-size: 14px; 
color: #fff; 
} 

这里是HTML

<div id="site_wrapper"> 
    <div id="top_bar"> 
    This is the Top Bar 
    </div> 
    <div id="content> 
    <div id="content_left"> 
     Test 
    </div> 
    <div id="content_right"> 
     Test 
    </div> 
    </div> 
</div> 
<div id="footer"> 
    This is the footer 
</div> 

Answer 1

添加height: 100%;到#site_wrapper

DEMO