當窗口被調整大小時，右邊的CSS填充較小

我在我的存檔和搜索頁面的右側填充了填充，我相信它與我的body元素有關，但我不太確定這些頁面上的不同之處來自網站上的其他頁面，因爲它們都使用相同的格式，所以它們在樣式上都很好。 It's a wordpress website.正如我所說的，它只發生在這個頁面，搜索頁面和其他所有的都很好，所以我很困惑它在做什麼。當窗口被調整大小時，右邊的CSS填充較小

html { font-size: 100%; overflow-y: scroll; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; background: url(img/BG.jpg) repeat; min-width:1024px; } 

body { margin: 0px; padding 0px; font-size: 13px; line-height: 1.231; background: url(img/NAV-bg.jpg) top repeat-x;} 

header { width: 960px; height: auto; margin: 0 auto; display: block;} 

#container { width: 960px; margin: 20px auto; padding: 0 1.5em;} 

aside { width: 260px; height: auto; float: left; position: relative;} 

#main { width: 650px; height: auto; float: right; position: relative;} 

#footer { width: 100%; min-width:1024px; display: block; height: 503px; background: url(img/FOOTER-bg.jpg) repeat-x; background-color: #821d20; position: relative; top: 100px; }

如果你減少窗口的大小，你會發現，在頁面底部的滾動條顯示出來，然後在右邊的填充開始初具規模。如果你的窗口變大了，那麼填充空間就會消失，底部的滾動條消失。我是否以任何方式限制了我的身體標記以實現此目的？

我已經看過這一個，但我已經有一個最小寬度定義。 Website has strange whitespace on right side of the page when the browser is resized to a smaller window

來源

2012-06-21 kia4567

在第108行的style.css文件中，從標頭標記中刪除width屬性以修復水平滾動條問題。

固定CSS：

header { height: auto; margin: 0 auto; display: block;}

審覈，3D View in Firefox瀏覽器顯示的標題爲灰色的酒吧是你的問題的根源。創建文本的其他樣式不受影響。 enter image description here

提示：鼠標右鍵單擊在新標籤上面的圖片，並查看原始大小看。

來源

2012-06-26 10:17:28 arttronics

啊，如果我理解正確的問題，看來標籤header，特別是它的風格width: 960px，是什麼原因造成這種奇特的發生。標題中包含的div，#main，只有width: 650px。結果，標題的多餘寬度會導致它超出div的邊緣。

它似乎只在較小的屏幕寬度上顯示爲填充的原因是因爲圍繞所有這些的包含div（#container）以其邊距爲中心 - 所以超寬頭部的效果不會變得明顯直到瀏覽器足夠薄以致其右邊緣開始與頁眉的右側重疊。

而不是通過從頭部的樣式中刪除width: 960px來解決這個問題（這可能會弄亂實際需要這個頭部標籤寬度的網站），我會建議在所有違規標籤中添加重寫類，或許上線.archive-header { width: auto; }。但我想這個解決方案取決於你，因爲你可能比我更瞭解網站。

我希望這有助於！（我真的這樣做了，否則你會一無所有讀完這一切！對不起，如果你真的這麼做...）未來，請嘗試下載Firebug for Mozilla Firefox，它有一個方便的元素檢查器，可以讓你隨時隨地使用元素看看有什麼作用。它應該幫助你自己發現這些問題，所以你可以更快地修復它們。

來源

2012-06-22 13:52:08 Serlite

當窗口被調整大小時，右邊的CSS填充較小

回答

相關問題