如何在兩個側邊欄中垂直重複背景圖片？

頁面兩側的側邊欄中背景圖像的垂直重複會停止在計算機屏幕結束的位置，而不是頁面結束的位置。正如你所看到的，我已經試圖讓所有的父母height: 100%在CSS中，但它不起作用。我如何讓圖像重複到頁面底部？如何在兩個側邊欄中垂直重複背景圖片？

HTML：

<body> 
    <div class="sidebar" id="sidebar1"></div> 
    <div id="content"> 
    </div> 
    <div class="sidebar" id="sidebar2"></div> 
</body>

CSS：

html, body { 
    min-height: 100%; 
    min-width: 100%; 
} 
#content { 
    min-height: 100%; 
    width: 80%; 
    margin-left: auto; 
    margin-right: auto; 
    text-align: center; 
} 
.sidebar { 
    min-height: 100%; 
    left: 0; 
    position: absolute; 
    top: 0; 
    width: 100%; 
    z-index: -1; 
} 
#sidebar1 { 
    background: url(image.png) repeat-y bottom left; 
    background-size: 125px 125px; 
} 
#sidebar2 { 
    background: url(image.png) repeat-y bottom right; 
    background-size: 125px 125px; 
}

來源

2014-10-04 Jan Christiaan Zwier

這裏有一個非常詳細的解答一個similar question這表明使用CSS3功能叫做Viewport Percentage Length爲：

height:100vh;

請參考那個答案，其中包括何時可以解釋b使用和瀏覽器支持它，看看它是否可以幫助你。還有其他的答案值得一看，在不設定高度的情況下達到同樣的效果。

來源

2014-10-04 15:42:31 cmousset

你可以用javascript（jQuery）來解決它。在頁面加載後重新調整您的側邊欄。例如：

$(document).ready(function(){ 
    if($('#content').height()>$('#sidebar1').height()){ 
     $('#sidebar1').height($('#content').height()); 
     $('#sidebar2').height($('#content').height()); 
    } 
});

（我沒有嘗試，但我認爲它的工作原理）

來源

2014-10-04 15:49:08

如何在兩個側邊欄中垂直重複背景圖片？

回答

相關問題