100% 宽度的标题不填满浏览器答案

【问题标题】：100% width header doesn't fill browser100% 宽度的标题不填满浏览器
【发布时间】：2010-11-13 02:43:25
【问题描述】：

当浏览器窗口小到足以强制水平滚动条并且您向右滚动时，标题的背景颜色会在浏览器边缘之前结束。我正在使用 CSS 类。

.s_header {
    margin: 0;
    width: 100%;
    display: block;
    border-bottom: 1px solid #000;
    background-color:#b8dbec;
    height:133px;
}

<div class="s_header"> 的内容没有它下面的 4 列表格那么宽，其中内容总计约 840 像素，图像宽度+填充和 140 像素的固定宽度列。因此，当浏览器窗口小于 840 像素时，会出现一个水平滚动条，除了在滚动时会切断标题的背景之外，这是可以的。

<div class="s_header"> 的父元素是 body 和 html，其中 100% width 表示窗口宽度。我尝试在.s_header 类中包含溢出：可见但没有成功。

body 宽度也设置为 100% margin 0

当滚动条出现时，有没有一种简单的方法可以让背景向右延伸？

问题页面在here

任何建议将不胜感激。

【问题讨论】：

标签： width css

【解决方案1】：

设置body标签的边距

内联方式

<body style="margin: 0px 0px 0px 0px;">

在你的 style.css（或其他）中

body {
  margin: 0px 0px 0px 0px;
}

【讨论】：

【解决方案2】：

我衷心建议您使用 firefox 并安装 firebug： http://getfirebug.com/

它有一个很酷的功能，可以让你检查一个 dom 元素，它会告诉你所有的样式，以及它们来自什么样式表。因此，如果主体继承了一些错误的填充（或其他东西），您将能够直观地看到发生了什么:-)

【讨论】：

【解决方案3】：

看起来问题出在正文表中的三个图像上。当您减小浏览器宽度时，它会导致三个图像如此聚集，位于单独的表格单元格中，它们无法换行，从而导致固定宽度。

您可以尝试通过对标题使用重复的背景图像来伪造解决方案，但我会使用浮动方法重新编写表结构。

【讨论】：

【解决方案4】：

更简单的方法是创建一个内部 div 并将其设置为与页面在滚动条出现之前的宽度相同的示例

<div class="s_header"> <div class="inner">

</div> </div>

.inner{
  width:990px;
  background:#f00;
  margin:0 auto;
}

【讨论】：

【解决方案5】：

我的 [非常简单] [可能很丑陋] 解决方案：

最后 3. 将.minwidth 类应用于所有身体尺寸必须为 100% 宽的大龄儿童。

调整您的浏览器窗口和/或更改分辨率，对于高达 1440*900 的所有屏幕分辨率，您应该已经摆脱了这个烦人的问题

希望我能帮上忙

【讨论】：