我正在製作一個網站,其頂部有一個大圖片,延伸到頁面的最右側。問題在於瀏覽器不斷添加水平滾動條以允許用戶滾動到該圖像的末尾,但我不希望它做到這一點。防止一定寬度後的水平滾動
有沒有什麼辦法可以告訴瀏覽器將圖像處理爲背景圖像,或者在940像素後停止滾動?
http://www.electric-drumkit.com/404.php
有頁面的一個例子,所以你可以得到我的意思更好的主意。
我正在製作一個網站,其頂部有一個大圖片,延伸到頁面的最右側。問題在於瀏覽器不斷添加水平滾動條以允許用戶滾動到該圖像的末尾,但我不希望它做到這一點。防止一定寬度後的水平滾動
有沒有什麼辦法可以告訴瀏覽器將圖像處理爲背景圖像,或者在940像素後停止滾動?
http://www.electric-drumkit.com/404.php
有頁面的一個例子,所以你可以得到我的意思更好的主意。
在這裏做它的方式是:
div
(或其他有關HTML5標籤,如果你喜歡):<div id="wrapper">
,含內body
一切。將這些規則從body
到#wrapper
:
margin: 0 auto;
position: relative;
width: 960px;
添加這個新的CSS:
body {
min-width: 960px;
overflow: hidden;
}
添加它來獲取水平滾動回當窗口小於960px
寬:
html {
overflow: auto;
}
這裏是live demo,所以你可以快速看到我的答案是否會產生預期的效果。
經過Firefox,Chrome,IE8測試。
把圖像變成這樣一個div:
<div class="image"></div>
而且在CSS,你可以這樣寫:
.image {background: url(http://www.electric-drumkit.com/_images/_feat/404.png) bottom right no-repeat; height: 314px;}
這樣一來,你的DIV將呈現圖像作爲背景,成div,我認爲不會有滾動。
是的,我猜這是有效的,但每個頁面都有一個不同的圖像,它會使代碼膨脹。這是最後的選擇lol – Sam 2011-04-06 10:35:28
如果您希望圖像延伸到頁面最右側,您應該使用更大的圖像。例如,它[看起來像這樣](http://i.imgur.com/mRBEu.jpg)對我來說,我甚至沒有瀏覽器的全尺寸;甚至不接近它。很多用戶的屏幕水平寬度大於'940px'。 – thirtydot 2011-04-06 10:44:40
當我說網頁我的意思是內容的邊緣。通常情況下,圖像是完整的圖像,所以你不會在右側看到直線斷裂,但看起來我必須調整這一個大聲笑。 – Sam 2011-04-06 10:55:49