CSS粘滞页脚不起作用

Question

我有一个简单的布局，我试图使用CSS。顶部和底部行高35px，具有动态大小的中心。我正在尝试使用本教程使Sticky Footer工作：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