為什么在瀏覽器窗口調整大小時，主體寬度未設置為100％？

Question

例如，讓我們看一下Twitter引導程序的主頁http://twitter.github.com/bootstrap/index.html

如果我將瀏覽器窗口的大小調整為400px，我會在右邊看到奇怪的空間（看圖片）。

另一個示例是StackOverflow。 在瀏覽器中，調整灰色背景標題行的大小不要調整到所有屏幕的大小（請參見下文）。

為什么正文不調整為瀏覽器窗口的100％？ 我的網站上有類似的問題

Answer 1

當您使瀏覽器窗口小於內容的最小寬度並水平滾動時，就會發生此問題。 設置為100％寬度的元素為寬度的100％，直到您水平滾動直到看起來被切除為止。

解決方案是在這些元素上設置min-width ，以使它們至少與內容一樣寬。

這是一個例子：

的HTML

<div id="header1">Broken header</div>
<div id="header2">Fixed header</div>
<div id="content">
  content goes here.
</div>

的CSS

#header1 {
  background-color:#ccc;
  border: 2px solid #00F;
}

#header2 {
  background-color:#ddd;
  min-width: 600px;
  border: 2px solid #0F0;
}

#content {
  width: 600px;
  border: 2px solid #F00;
}

演示版

類似問題：

• 100％寬度的背景圖像無法在水平滾動條上延伸
• CSS：水平滾動時缺少背景
• 頁腳水平滾動時未拉伸100％
• 當顯示內容大於視口時，如何避免頁眉和頁腳損壞？