2

我有一个简单的布局，我正在尝试使用 CSS。顶行和底行高 35 像素，具有动态大小的中心。我正在尝试使用本教程让 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>
4

1 回答 1

3

添加height: 100%;到#site_wrapper

演示

于 2013-04-23T19:13:49.013 回答