Question

例如，让我们来看看Twitter bootstrap http://twitter.github.com/bootstrap/index.html

的主页

如果我将浏览器窗口调整为400px，我会在右侧看到奇怪的空间（看图片）。

enter image description here

另一个示例是StackOverflow。在具有灰色背景的浏览器调整大小标题行上，不会调整大小到所有屏幕（见下文）。

enter image description here

为什么正文不会调整到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;
}

Demo

类似的问题：

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

1 个答案: