如何在瀏覽器中使用css限制div的可滾動寬度

我想知道如何在瀏覽器未最大化時使用CSS來限制頁面的可滾動寬度。一個典型的例子可以在着陸頁在http://www.lynda.com/如何在瀏覽器中使用css限制div的可滾動寬度

當瀏覽器最大化，在沙發上的女人的照片具有在左，右，但一些空間被發現時，瀏覽器面積減少你意識到你是不是能夠滾動到極端的左側和右側。

我試圖用下面的代碼在http://www.lynda.com/上實現類似的佈局，但是當我縮小瀏覽器窗口並滾動到右側時，我的圖像在版權上被剪掉。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; 

charset=utf-8" /> 
<title>Untitled Document</title> 
<link href="ave.css" rel="stylesheet" type="text/css" /> 

<link href="gh.css" rel="stylesheet" type="text/css" /> 
</head> 

<body bgcolor="#EEEEEE"> 
<div id="bigpicturecontainer"></div><!--image size is 1600px x 

400px and can be downloaded here 

http://www.ghanabuildingplans.com/trial.png 
--> 

<div id="bigmessage">Content for id &quot;bigmessage&quot; 

Goes Here</div> 
</body> 
</html>

而且我的CSS代碼：

#bigpicturecontainer { 
background-color: #000; 
background-image: url(images/trial.png); 
background-repeat: no-repeat; 
background-attachment: scroll; 
background-position: center center; 
height: 400px; 
width: 100%; 
} 
#bigmessage { 
height: 45px; 
width: 900px; 
border-top-width: 0px; 
border-right-width: 0px; 
border-bottom-width: 0px; 
border-left-width: 0px; 
border-top-style: solid; 
border-right-style: solid; 
border-bottom-style: solid; 
border-left-style: solid; 
margin-top: 50px; 
font-size: 36px; 
text-align: center; 
margin-left: auto; 
margin-right: auto; 
}

我已經找到了解決方案！我所需要做的就是設置最小寬度。

來源

2013-11-04 Ackam

這個例子看起來他們已經有了一個固定的寬度圖像和黑色的背景。由於黑色邊緣，圖像與背景混合。這裏是[圖片]（http://cdn.lynda.com/assets/197-r20131102/Website/ui/images/LayoutNMHP/hero-image-tablet-couch.jpg）。 – edhedges

你有沒有做過任何你自己的研究，或者馬上就到達這裏？ –

它是背景的背景圖像。你看到的女人是這樣的圖片： http://cdn.lynda.com/assets/197-r20131102/Website/ui/images/LayoutNMHP/hero-image-tablet-couch.jpg 你看到了轉換到黑色的一面。在這個background-image後面有一個background，它只是黑色。

background-image: url(../../images/LayoutNMHP/hero-image-tablet-couch.jpg); 
background: #000

http://www.w3schools.com/css/css_background.asp

來源

2013-11-04 18:55:10 user2693017

這很像你在談論的網站作爲一個CSS屬性background-image被包埋。它的可見性取決於它被嵌入的元素。在這種情況下，在.hero div。這個div有固定的高度。默認寬度爲100％。圖像位於該div的中心。無論窗口視口是什麼，圖像總是適合.hero div。它不會影響該div，因此不能強制網站溢出外部窗口。
這樣的畫面的快捷CSS可能是這樣的：

.hero { 
    background-color: #000; 
    background-image: url(http://cdn.lynda.com/assets/197-r20131102/Website/ui/images/LayoutNMHP/hero-image-tablet-couch.jpg); 
    background-repeat: no-repeat; 
    background-attachment: scroll; 
    background-position: center center; 
}

來源

2013-11-04 18:55:18 matewka

謝謝你們提供的答案。我非常感謝。很高興有像你這樣的人幫助我們（新手）走上每一步。 – Ackam

如何在瀏覽器中使用css限制div的可滾動寬度

回答

相關問題