0

我有 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%;}一切正常时，如果页面比客户端的屏幕短。

正文高度 100%，短页

当页面高于客户端屏幕时，背景图像位于屏幕底部 - 而不是页面。当用户 srcolls 页面时，图像位于屏幕中间。
这张图显示了问题（为方便起见，黄色背景）：

正文高度 100%，高页面

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

正文最小高度 100%，短页

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

4

3 回答 3

0

您可以使用 jQuery 将 body min-height 设置为屏幕尺寸并将其从页脚高度偏移

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

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

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

});
于 2013-02-26T10:52:32.493 回答
0

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

于 2013-02-26T11:24:46.357 回答
0

我自己用身体解决方案解决了这个问题，因为我找不到其他任何东西。我将背景图像设置为主体，它也位于页脚后面。我无法想出其他解决方案，因为您实际上是在页面包装器之外放置了一个 div：

body{
    width:100%;
    background: url(../images/lines.png);
    background-repeat: repeat-y;
    background-position: center center;
}
于 2013-07-17T08:19:28.623 回答