問題與100％的背景圖像包裝消失滾動

時，我有http://www.mrfishermusic.com/問題與100％的背景圖像包裝消失滾動

你會發現，主包裝是1042px（#main）。然後我有#container圍繞寬度100％。我是這樣做的，因爲該頁面的背景圖像是明智的寬度。

問題是，如果瀏覽器的水平尺寸很小...比如700px寬（或者小一點，就像在iPhone上），當你滾動到右邊時，頁眉和頁腳都會消失，雖然#main包裝保持不變。

我看到一些其他人有這個問題，但我不是一個CSS忍者，所以我不能完全重現解決方案到我的網站 - 我很抱歉，如果這之前已經問過。

謝謝！

來源

2011-06-12 Tallboy

100％的容器大小是相對於視口的，並且在滾動/調整大小時不會更新。您有幾種選擇：

使用JavaScript來處理視口大小改變
設置頭容器的最小像素大小
設置在機身的背景，而不是（因爲它不限於視口大小）：background-image: url(background.png); background-position: center top;

來源

2011-06-12 11:00:59 skolima

謝謝你skolima，這是一個巨大的幫助..你介意，如果我問幾個更快的問題？ 1.通常所稱的腳本是什麼？我試過視口調整腳本，但沒有發現太多關於它。 2.這是我一起去的方法。它運行得很好，但如果背景超出了1042，那又如何呢？我已經有一個非常高分辨率的身體紋理，我不能將它們合併，或者紋理會像2mb，所以背景圖像在身體上是沒有問題的。換句話說，沒有訴諸JS，是否有另一種方法將div的大小調整爲100％到視口？謝謝！ – Tallboy 2011-06-12 21:41:28

這裏有一個很好的描述：http://css-tricks.com/full-browser-width-bars/（使用pseudoelements）。 – skolima 2011-06-14 06:19:34

在<body>上設置min-width也可以解決這個問題。

來源

2012-06-07 11:47:48 Claire

我試過你的解決方案，它的工作原理！非常簡單..非常有用！謝謝 – 2013-06-01 10:45:18

問題與100％的背景圖像包裝消失滾動

回答

相關問題