为什么在浏览器窗口调整大小时,体宽不设置为100%？

Question

例如,让我们来看看Twitter bootstrap的主页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%宽度bg图像不在水平滚动上延伸
• CSS:水平滚动时背景不存在
• 在水平滚动时,页脚不会伸展100%
• 当显示比视口宽的内容时,如何避免我的页眉和页脚被破坏？