1

例如，让我们看一下 Twitter 引导程序的主页http://twitter.github.com/bootstrap/index.html

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

在此处输入图像描述

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

在此处输入图像描述

为什么 body 不调整到浏览器窗口的 100%？我的网站上有类似的问题

4

1 回答 1

5

当您使浏览器窗口小于内容的最小宽度并水平滚动时，就会出现此问题。设置为 100% 宽度的元素是宽度的 100%，直到您水平滚动，它们似乎被截断。

解决方案是在这些元素上设置 a 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;
}

演示

类似的问题：

于 2012-11-03T23:25:42.467 回答