8

当浏览器窗口小到足以强制水平滚动条并且您向右滚动时，标题的背景颜色在浏览器边缘之前结束。我正在使用一个 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课堂上包括溢出：可见但没有成功。

正文宽度也设置为 100% 边距 0

当滚动条出现时，有没有一种简单的方法可以让背景在右侧扩展？

问题页面在这里

任何建议将不胜感激。

4

5 回答 5

11

设置身体标签的边距

在线方式

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

在你的 style.css （或其他）

body {
  margin: 0px 0px 0px 0px;
}
于 2009-07-22T17:52:35.753 回答
1

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

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

于 2009-07-22T17:51:14.540 回答
0

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

  1. 将你的 body 标签 min-width 属性设置为 100%；
  2. 定义一个 minwidth 类，该类定义一个 100% 宽度属性和一个min-width基于以下计算的属性：
    • 将字体大小设置为 100%，在浏览器中验证其转换为像素；
    • 将现在的 17" 显示器标准分辨率 1440px 宽度与此像素 1em 字体大小结果分开；
    • 将em 中表示的 min-width 属性设置为此结果；
    • 例如对于字体系列：'Gill Sans MT'，无衬线；100% 大小导致 16px 字体；
      1440/16 = 90
      你的 CSS 必须如下所示：
      html {whatever} body {min-width: 100%;} .minwidth {min-width:90em;width:100%;}

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

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

希望我能帮上忙

于 2012-03-28T16:14:32.210 回答
0

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

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

</div> </div>

.inner{
  width:990px;
  background:#f00;
  margin:0 auto;
}
于 2009-07-23T10:50:26.997 回答
0

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

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

于 2009-07-23T10:59:34.640 回答