页面底部的粘性页脚和正文背景图像

Question

I have HTML5boilerplate and I want to make a template with sticky footer and image as background of body. 我有HTML5boilerplate，我想制作一个带有粘性页脚和图像作为背景的模板。 The background should be always at the end of the page (if page is higher than clientHeight) or at the screen (if page is shorter). 背景应始终位于页面末尾（如果页面高于clientHeight）或屏幕（如果页面较短）。
My problem is when sticky footer works but background doesn't and vice versa. 我的问题是粘性页脚起作用但背景不起作用，反之亦然。

Take a look, please. 请看一看。

This is my index.html: 这是我的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>

My CSS is: 我的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; }

When I define html, body { height: 100%;} everything is ok, if page is shorter than client's screen. 当我定义html, body { height: 100%;}如果页面比客户端的屏幕短，则html, body { height: 100%;}一切正常。

身高100％，短页

When the page is higher than client's screen background-image is at the bottom of the screen - not the page. 当页面高于客户端屏幕时，背景图像位于屏幕底部，而不是页面底部。 When user srcolls the page the image is in the middle of the screen. 当用户浏览页面时，图像位于屏幕中间。
This picture shows the problem (yellow background for your convience): 这张图片显示了问题（为您方便起见，黄色背景）：

身高100％，高页

And when when I define html, body { min-height: 100%;} everything is ok on high pages, but sticky footer doesn't work on shorter ones: 当我定义html, body { min-height: 100%;}在高页面上一切正常，但是在较短的页面上不显示页脚：

身体最低身高100％，短页

I'd like to add that I don't want to fixed background. 我想补充一点，就是我不想固定背景。 It should be at the of the screen or page. 它应该在屏幕或页面的。

Answer 1

You could use jQuery to set the body min-height to the screen size and offset it from the footer height 您可以使用jQuery将主体的最小高度设置为屏幕尺寸，并将其从页脚高度偏移

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

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

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

});

Answer 2

您可以从本教程尝试不使用js的Sticky footer： http ： //ryanfait.com/sticky-footer/

Answer 3

I myself solved the issue with the body solution since I couldn't find anything else. 我自己用身体溶液解决了这个问题，因为我找不到其他东西。 I set my background image to the body and it got behind the footer as well. 我将背景图像设置在身体上，它也位于页脚后面。 There is no other solution I could come up with , since you're actually placing a div outside the page-wrapper: 我没有其他解决方案，因为您实际上是将div放在页面包装程序之外：

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

页面底部的粘性页脚和正文背景图像

问题描述

3 个解决方案

解决方案1
0 2013-02-26 10:52:32

解决方案2
0 2013-02-26 11:24:46

解决方案3
0 2013-07-17 08:19:28

页面底部的粘性页脚和正文背景图像

问题描述

3 个解决方案

解决方案1 0 2013-02-26 10:52:32

解决方案2 0 2013-02-26 11:24:46

解决方案3 0 2013-07-17 08:19:28

解决方案1
0 2013-02-26 10:52:32

解决方案2
0 2013-02-26 11:24:46

解决方案3
0 2013-07-17 08:19:28