100％宽度标题不填充浏览器

时间：2009-07-22 17:49:10

标签： width css

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

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

<div class="s_header">的内容不如下面的4列表宽，其中内容总计为840px，图像宽度为+ padding，140px为固定宽度列。因此，当浏览器窗口小于840px时，会有一个水平滚动条，除了滚动时标题的背景被切断之外。

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

体宽也设置为100％边距0

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

问题页面位于here

任何建议都将不胜感激。

5 个答案:

答案 0 :(得分：10)

设置身体标签的边距

以串联的方式

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

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

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

答案 1 :(得分：1)

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

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

答案 2 :(得分：0)

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

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

</div> </div>

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

答案 3 :(得分：0)

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

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

答案 4 :(得分：0)

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

  1. 将您的body标签min-width属性设置为100％;
  2. 根据以下计算定义一个定义100％宽度属性和min-width属性的minwidth类：
    • 将字体大小设置为100％，验证其在浏览器中的转换为像素;
    • 将现今的17“显示器标准分辨率1440px宽度除以此像素1em字体大小的结果;
    • 将以em 表示的min-width属性设置为此结果;
    • e.g。对于font-family：'Gill Sans MT'，sans-serif; 100％大小导致16px字体;
      1440/16 = 90
      你的CSS必须如下所示：
      html {whatever} body {min-width: 100%;} .minwidth {min-width:90em;width:100%;}

    3. 最后3.将.minwidth课程应用于所有身体大小的孩子，身体宽度必须达到100％。

    重新调整浏览器窗口和/或更改分辨率，您应该摆脱所有屏幕分辨率高达1440 * 900的烦人问题

    希望我能帮忙

相关问题
最新问题