頁面底部的粘滯頁腳和身體背景圖像

我有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

當頁面比客戶端屏幕的背景圖像更高在屏幕的底部 - 而不是網頁。當用戶打印頁面時，圖像位於屏幕中間。
此圖爲問題（黃色背景爲您便於學習）：

body height 100%, high page

而當我定義html, body { min-height: 100%;}一切都是高頁確定，但粘頁腳不較短的工作：

body min-height 100%, short page

我想補充一點，我不想修復背景。它應該在屏幕或頁面上。

來源

2013-02-26 bernard

你可以使用jQuery身體最小高度設置爲屏幕大小和頁腳的高度偏移它

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

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

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

});

來源

2013-02-26 10:52:32

當然，我可以，但我不想。我仍然相信我只能用CSS來完成。無論如何謝謝你的回覆。 – bernard 2013-02-26 11:19:46

你可以試試置頂頁腳不從本教程JS：http://ryanfait.com/sticky-footer/

來源

2013-02-26 11:24:46 sugresmax

它不起作用。查看示例：您可以添加內容或更改窗口大小以查看：[http://jsbin.com/umavoj/2/watch](http://jsbin.com/umavoj/2/watch） – bernard 2013-02-26 12:39:25

我的英語是wery壞。可能你想要這個：http://jsbin.com/ipogon/1/？ – sugresmax 2013-02-26 18:47:13

我不喜歡'z-index'解決方案。你的想法需要1個額外的標籤。恕我直言，最好這樣做：[http://jsbin.com/umavoj/5/watch](http://jsbin.com/umavoj/5/watch）它有1個額外的父'div.bg'。唯一的不便之處是'div.bg'必須是透明的，如果你想顯示正文背景圖像（例如在頁面頂部）。不過，我仍然在尋找一個想法如何做到這一點，沒有任何額外的HTML元素。問候！ – bernard 2013-02-26 21:58:07

我我自己解決了身體解決方案的問題，因爲我找不到其他任何東西。我將自己的背景圖像放置在身體上，並且它也位於頁腳後面。有沒有其他的解決方案，我可以拿出來，因爲你實際上把一個div外頁面包裝：

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

來源

2013-07-17 08:19:28

頁面底部的粘滯頁腳和身體背景圖像

回答

相關問題