100％的背景瓷磚，在100％的高度div

我有一個問題，我正在嘗試開發一個佈局。我基本上已經把view-port分成了兩個等寬的div，每個都有不同的背景平鋪圖像。100％的背景瓷磚，在100％的高度div

我有拉伸全屏100％，但有一個滾動問題。

背景圖像被裁剪到視圖端口的原始高度..！

這裏的HTML：

<body> 

<div id="container"> 

     <div id="left" class="half"> 
     left content here 
     </div> 

     <div id="right" class="half"> 
      right content here 
     </div> 
</div> 

</body>

這裏的CSS：

html, body { 
    margin:0; 
    padding:0; 
    height:100%; 
    font: 14px Gotham, "Helvetica Neue", Helvetica, Arial, Geneva, sans-serif; 
    color: #505050; 
} 

div#container { 
    height: 100%; 
    min-width: 800px; 
    min-height: 500px; 
} 

div.half { 
    height: 100%; 
    width: 50%; 
} 

div.half#left { 
    float: left; 
    text-shadow: 0px 1px 1px white; 
    background-image: url(images/metalBG.jpg); 
} 

div.half#right { 
    float: right; 
    text-shadow: 0px -1px 1px black; 
    background-image: url(images/fabricBG.jpg); 
}

我不知道，如果是，也許一個JavaScript，因此包括在這個貓也。

來源

2010-09-29 Doobox

如果我還記得，用身體下100％的高度將呈現DIV的瀏覽器窗口大小的高度。由於它不在摺疊下方，因此當您滾動時，圖像將在窗口高度的100％處停止。我正在出路，所以我沒有足夠的時間給出完整的答案，但這可能會幫助您完成任務。 – cm2 2010-09-29 13:06:32

是的，仔細觀察，確實看起來像是發生了什麼。 – Doobox 2010-09-29 13:55:19

所以有什麼辦法讓左右div在滾動時保持100％的高度。我的猜測是這將涉及JavaScript。 – Doobox 2010-09-29 13:57:08

我會使用Firebug或類似的工具來驗證它是一個背景問題，而不是DIV尺寸問題。也許剪輯的不是你的BG圖像，而是你的DIV的高度。

如果不是這種情況，你可以嘗試添加

background-repeat:repeat,

你的CSS爲div.half，但是這已經是默認值，所以除非你有一些CSS地方覆蓋它，要到位無論如何。

來源

2010-09-29 12:52:14 levik

這似乎得到我想要的結果，但未在資源管理器中進行測試。

html { 
    margin:0; 
    padding:0; 
    font: 14px Gotham, "Helvetica Neue", Helvetica, Arial, Geneva, sans-serif; 
    color: #505050; 
    background-image: url(images/metalBG.jpg); 
} 

body { 
    float:right; 
    margin:0; 
    padding:0; 
    width:50%; 
    background-image: url(images/fabricBG.jpg); 
} 

#left { 
    float:left; 
    margin-left:-600px; 
    width:550px; 
}

來源

2010-09-29 14:45:04 Doobox

改變身體的寬度和位置是一個有趣的方法，我從來沒有見過:)只是要小心窗口大小;因爲您的保證金看起來像它的使用像素（雖然這可能是你要找的）？ – cm2 2010-09-30 00:52:29

我還沒有運行該代碼，但它添加到現有的代碼應該工作（我希望：P）。你可以把他們都使用類似的div和他們的背景固定：

.half{ 
    position:fixed; /* keeps the divs in the same place */ 
    overflow:auto; /* overflowing content will scroll */ 
    background-attachment:fixed; /* the background won't scroll with content */ 
}

來源

2010-09-30 00:47:27 cm2

100％的背景瓷磚，在100％的高度div

回答

相關問題