Question

我有HTML5boilerplate，我想制作一个粘性页脚和图像作为正文背景的模板。背景应始终位于页面的末尾（如果页面高于clientHeight）或在屏幕上（如果页面较短）。
我的问题是粘性页脚工作但后台没有，反之亦然。

请看一下。

这是我的index.html：

<body>
    <div class="wrap">
        <header></header>
        <div class="main clearfix right-sidebar">
            <div class="content"></div>
            <div class="sidebar"></div>
        </div>
    </div> <!-- end of .wrap -->
    <footer></footer>
</body>

我的CSS是：

/*html, body { min-height: 100%;}*/
html, body { height: 100%;}
body > .wrap {height: auto; min-height: 100%; margin: 0 auto;}
body > .wrap > .main { padding-bottom: 70px;} 
body > .wrap, body > footer {width: 950px; position: relative;}
body > footer { margin: -70px auto 0 auto ; height: 70px; clear:both; } 
</* end of centered sticky footer */
body { background: url(../img/bg.png) #fff 0% 100% repeat-x; }
.clearfix:before, .clearfix:after { content: " ";  display: table;}
.clearfix:after { clear: both; }
.clearfix { *zoom: 1; }

当我定义html, body { height: 100%;}一切正常时，如果页面比客户的屏幕短。

body height 100%, short page

当页面高于客户端的屏幕时，背景图像位于屏幕底部 - 而不是页面。当用户srcoll页面时，图像位于屏幕中间这张照片显示了问题（黄色背景让你流连忘返）：

body height 100%, high page

当我定义html, body { min-height: 100%;}高页时一切正常，但粘性页脚不适用于较短的页面：

body min-height 100%, short page

我想补充一点，我不想修复背景。它应该在屏幕或页面上。

Answer 1

您可以使用jQuery将主体最小高度设置为屏幕大小并将其从页脚高度偏移

$('document').resize(function(){

  var windowHeight = $('window').height() - $('footer').height();

  $('.wrap').css('min-height', windowHeight );

});

Answer 2

您可以在本教程中尝试不带js的Sticky页脚：http://ryanfait.com/sticky-footer/

Answer 3

我自己解决了身体解决方案的问题，因为我找不到任何其他东西。我将背景图像设置为正文，它也在页脚后面。我没有其他解决方案，因为你实际上是在页面包装器之外放置一个div：

body{
    width:100%;
    background: url(../images/lines.png);
    background-repeat: repeat-y;
    background-position: center center;
}

粘滞的页脚和身体背景图像在页面的底部

3 个答案: