獲取垂直拉伸的背景圖片

Question

我創建了一個帶有條紋圖像（寬度爲62px，高度爲32px）的簡單CSS的網頁，我希望它一直垂直重複到頁面的底部。我的問題是，它停止在內容的末尾，比如如果我把「測試」，它會很小。如果我有整篇文章，它會重複一遍 - 但如果頁面不滾動，則不會太多。

圖片：http://avaworld.net/images/bordLeft-blue.png

網站 - http://www.avaworld.net/

#blueWrap { margin: 0; background-color: #131313; padding: 0; display: block; }

#blueRight { padding-right: 62px; background: url(http://avaworld.net/images/bordRight-blue.png) top right repeat-y; }

​​

<div id="blueWrap"> 
    <div id="blueRight"> 
     <div id="blueLeft"> 
     Test 
    </div> 
    </div> 
</div> 

Answer 1

應用此你的CSS

body, #blueWrap, #blueRight, #blueLeft{height:100%;} 

Answer 2

與body, #blueWrap, #blueRight, #blueLeft{height:100%;}的問題是，當你有很多的內容，在blueRight和blueLeft元素不會按照頁面滾動時。

對於blueRight和blueLeft屬性，在他們的CSS嘗試添加：position: fixed; height: 100%;

position: fixed;意味着滾動時div將留在那個確切位置偶數。

height: 100%;是使高度100％。