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

【问题标题】：Sticky footer and body background image at the bottom of the page页面底部的粘性页脚和正文背景图像
【发布时间】：2013-02-26 10:14:29
【问题描述】：

我有 HTML5 样板，我想制作一个带有粘性页脚和图像作为正文背景的模板。背景应始终位于页面末尾（如果页面高于 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%;} 时，如果页面比客户的屏幕短，一切正常。

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

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

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

【问题讨论】：

标签： html css background-image sticky-footer background-position

【解决方案1】：

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

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

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

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

});

【讨论】：

当然可以，但我不想。我仍然相信我只能用 CSS 来做到这一点。无论如何，谢谢您的回复。

【解决方案2】：

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

【讨论】：

它也不好用。查看示例：您可以添加内容或更改窗口大小查看：http://jsbin.com/umavoj/2/watch
我不喜欢z-index 解决方案。您的想法需要 1 个附加标签。恕我直言，最好这样做：http://jsbin.com/umavoj/5/watch 它有 1 个额外的父级 div.bg。唯一的 1 不便是 div.bg 必须是透明的，如果您想显示正文背景图像（例如在页面顶部）。但是，我仍在寻找一个想法，如何在没有任何其他 html 元素的情况下做到这一点。问候！

【解决方案3】：

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

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

【讨论】：