Question

我正在使用以下CSS来获取我的标题和部分的宽度。

header {
width: 100%;
height: 60px;
    padding:60px;
    float:left;
    background: url('extras/header.jpg') repeat-x;
}

section {
width: 100%;
float: left;
    padding:20px 60px;
height:760px;
    background: url('extras/body.jpg') repeat-x;
}

在IE，Chrome和FF上，设计正在水平拉伸并生成X轴滚动条。即使分辨率高达1300px。

谁能明白为什么？我需要指定更多代码吗？

由于

Answer 1

填充总是添加您定义的宽度。所以实际上你的容器将从css文件中获得100％+ 120px的宽度。所以将宽度减少到100％以下。

Answer 2

您可以使用两个div，并在外部div中设置填充（请从标题和部分中删除填充）。像那样：

header {
    width: 100%;
    height: 60px;
    /* padding:60px; */ /* Move it to outer div */
    float:left;
    background: url('extras/header.jpg') repeat-x;
}

.section {
    width: 100%;
    float: left;
    /*padding:20px 60px;*/ /* Move it to outer div */
    height:760px;
    background: url('extras/body.jpg') repeat-x;
}

<!-- And in your code: -->
<div style="padding: 60px;">
   <div class="header">
      <p>Content here</p>
   </div>
</div>

Answer 3

如果您不想关注计算width-padding-margin-doodahs-demwutwuts的数学计算，您可以声明headers和sections拥有box-sizing: border-box ，所以你的最终渲染框将是声明的宽度，填充将在框内切割。 More info

宽度100％水平溢出

3 个答案: