使用粘性页脚,无法将主要内容的背景拉伸到页脚

时间:2013-04-03 15:08:42

标签: css footer sticky

我读了一篇非常相似的帖子并尝试了所有的解决方案,但没有任何乐趣。这就是我所拥有的。我的网站有全宽(100%)页眉和页脚空间以及一个较小宽度的容器。我使用了Ryan Fait粘性页脚,但是容器(带有白色背景)并没有达到页脚,除非我只是放入一堆换行符,这会破坏粘性页脚的用途。

样式:

html, body {
height: 100%;}

body    {
margin:0;
padding:0;
}

html {
overflow: -moz-scrollbars-vertical; 
overflow-y: scroll;}

.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -30px;}

.container {
width:1050px;
margin: 0 auto 0 auto;
min-height: 100%;
height: auto !important;
height: 100%;
padding:0 25px 0 25px;
background-color:#FFF;
    }

 .footer, .push {
height: 30px;}

 .footer {
background-color:#000;
width:100%;
height: 30px;}

和html:

<div class="wrapper">
<div class="container">
/* content */
</div>
<!--end container-->
<div class="push"></div>
</div>
<!--end wrapper-->
<div class="footer">
/* footer */
</div>
<!--end footer-->

1 个答案:

答案 0 :(得分:0)

你可以摆脱.wrapper并将.push移到.container

请参阅小提琴:http://jsfiddle.net/32WxJ/3/