列BG圖像不會延伸到100％的高度

我有一個左列與背景圖像和身體的另一個背景圖像，因此它填充屏幕的其餘部分。我在左側列的右側有一個內容區域，它將在瀏覽器窗口之後垂直延伸。將左列設置爲100％高度後，向下滾動左列的背景圖像不會超出屏幕的原始大小。有沒有一種純CSS的方式來讓左列延伸超過瀏覽器窗口的原始高度，以匹配內容區域？列BG圖像不會延伸到100％的高度

http://ophilium.com/test/test.html

html { 
    height: 100%; 
} 
body { 
    height: 100%; 
    background-image: url(../images/rightPanel.png); 
    background-repeat: repeat; 
    height: 100%; 
} 

#left { 
    background-repeat: repeat-y; 
    width: 207px; 
    padding: 10px; 
    float: left; 
    height: 100%; 
    background-image: url(../images/leftPanel.png); 
} 
#right { 
    height: 500px; 
    padding: 10px; 
    min-width: 773px; 
    float: left; 
} 
#container { 
    position: relative; 
    min-width: 1100px; 
    height: 100%; 
    background-repeat: repeat; 
}

來源

2012-04-28 Eric

添加規則background-attachment: fixed;您body元素。

來源

2012-04-28 20:20:45 meticulousMisnomer

這並不起作用 – Eric 2012-04-28 23:48:15

請演示http://jsfiddle.net/n9Tcv/

var right_height = jQuery('#right').height(); 
var left_height = jQuery('#left').height(); 
jQuery('#left').height(right_height);

你知道如何使用jQuery

？如果你有任何疑問只是回覆我，我這樣做這樣的代碼

來源

2012-04-28 20:44:33 ShibinRagh

是的，但如果您將內容移出正確的區域，它不再是100％的高度。 – Eric 2012-04-28 23:50:08

如果我正確理解你的問題，你需要使用equal height columns技術。谷歌搜索解決方案給我帶來了here和here。在那裏你可能會發現不同的方式使側邊欄與主要內容區域相同。只需選擇最好的一個:)

來源

2012-04-28 20:49:03 skip405

當你設置html和身體標記高度爲100％時，它們都將它們的高度設置爲瀏覽器窗口的內部高度，這意味着它們都具有相同的值，並且固定值。而且由於你的div是#container和#left，它們是身體要素的孩子，所以他們相應地設置了它們的100％高度，即內部高度。

此外，如果你需要一個問題的答案：那麼爲什麼div #right擴展？，這是因爲它不擴展，但溢出。由於您不告訴body或#container或#right將溢出屬性設置爲隱藏，它們都不會阻止此類瀏覽器行爲。在這種情況下，您假定原始窗口高度是溢出導致的高度。

來源

2012-04-28 21:01:06

列BG圖像不會延伸到100％的高度

回答

相關問題