CSS背景圖像大於窗口越野車

我有一個奇怪的問題，可能比其他任何更糟糕的編碼。CSS背景圖像大於窗口越野車

基本上，I have this site如果你調整瀏覽器的大小隻是圍繞網站的大小，你會看到你可以向右滾動。這是因爲我有一個<div>與position: absolute在網站的右側，寬度和高度似乎「推」在窗口外的網站，如果你滾動，你會看到網站的頂部部分不尊重我的width:100%。

如果你明白我的解釋，你能告訴我什麼是正確的方式來編碼？

來源

2011-10-11 Joel

不能告訴是肯定的，但它看起來像'保證金：0汽車;'你有你'＃DIV sbicenter'屬性是導致該問題。刪除，絕對似乎擺脫了水平滾動條。 – Nightfirecat

感謝您的回答，但是當我改變這一點時，我的兩面透明圖像不見了......所以它不起作用 – Joel

好吧，如果你真的想用正確的方式編寫你的網站，我很想說只是爲了重新編碼你的'＃bcktop' div更像你的網站標題：一個100％的寬度的div，有一個固定寬度的'position：relative;'div，裏面的圖片可以被錨定和相對定位。 – Nightfirecat

添加overflow-x：hidden;以CSS身份ID

這是隱藏滾動條並將這些圖像放在一邊的好方法。你的身體的CSS看起來就像這樣

body{ 
    font-family:Arial, Helvetica, sans-serif; 
    font-size:13px; 
    margin:0; 
    padding:0; 
    background-image: url(images/bckpattern.gif); 
    background-repeat: repeat; 
    overflow-x: hidden; 
}

來源

2011-10-11 05:15:56 rmagnum2002

非常感謝您的幫助，這是解決此問題的最快捷方式。我會稍後再嘗試其他建議，但這個是完美的。 – Joel

一些defintiion 視窗=瀏覽器的矩形所顯示的頁面

之所以你的頂部「犯規尊重」寬度：100％，是因爲當你絕對定位一個元素時，它完全從流中移除。這意味着div＃bcktop無法知道右側有更多內容。

當你說「寬度：100％」的元素，其父母爲身體，你說的「設置寬度等於視口的」

通過rmagnum2002答案是骯髒的，但快速的方法來解決你的問題，因爲它只是隱藏了問題。而且，擁有更小屏幕的用戶呢？他們將無法使用該頁面的那個區域（IM假設sbi_right將履行在未來的一段使用）

相反，我建議以下修補程序設置屬性最小寬度你的單槓，這樣當用戶調整瀏覽器大小（或者當他們的屏幕不夠大時），這些小節仍然會佔據整個頁面。

下面是一個例子：

<div id="annoncetop" style="min-width:MAX_WIDTH_OF_PAGE_CONTENT">

來源

2011-10-11 05:47:23 JavierIEH

非常感謝您的意見和解釋。這就是我意識到視口100％是問題，但找不到快速解決問題的方法。對於'sbi_right'來說，它實際上只是右側圖像的佔位符，左側是同樣的東西。因此，如果用戶的屏幕尺寸較小，我們不需要查看圖像，這就是爲什麼我不想讓滾動。謝謝 – Joel

CSS背景圖像大於窗口越野車

回答

相關問題