如何保持的背景色的寬度時，瀏覽器窗口變得更窄

這裏的整個頁面：如何保持的背景色的寬度時，瀏覽器窗口變得更窄

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 

<html> 
<head> 
    <style> 
     body {margin: 0; background: yellow;} 

     .bar {width: 100%; background: pink;} 

     .content {width: 800px; margin: 0 auto;} 
    </style> 
</head> 

<body> 
    <div class="bar"> 
     <div class="content"> 
      This is content~ 
     </div> 
    </div> 
</body> 
</html>

我的目的是有一個粉紅色的條填滿瀏覽器顯示的整個水平長度。當所述窗口寬於800像素時，條的內容保持居中，或者在較窄時保持固定並可水平滾動。但是，當瀏覽器變窄時，如果向右滾動，粉色欄不會到達右端;在這種情況下，可以看到人體的黃色。

在最新的Firefox，Chrome和IE8中可以看到此問題。

來源

2012-06-19 willf

您應該使內容粉紅

.content {width: 800px; margin: 0 auto;background: pink;}

或

使杆作爲內容寬度的最小寬度的背景。

.bar {width: 100%;min-width:800px;background: pink;}

來源

2012-06-19 13:19:25 gandil

最小寬度的解決方案似乎很好地工作（即使反對DRY），尤其是因爲它允許內容部分具有不同的顏色。在「狹窄的瀏覽器，向右滾動」的情況下檢查元素時發現：身體元素似乎還未到達最右邊的邊界。顯然它也需要最小寬度的東西。 – willf

最好的是設置min-width等於內容寬度。

如果您正在嘗試製作iphone &平板電腦的網站，則可以分別爲每個視圖端口定義寬度。

來源

2012-06-19 13:33:47

如何保持的背景色的寬度時，瀏覽器窗口變得更窄

回答

相關問題