1

我正在使用以下 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 轴滚动条。即使分辨率高达 1300 像素。

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

谢谢

4

3 回答 3

2

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

于 2012-06-19T09:53:57.893 回答
1

您可以使用两个 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>
于 2012-06-19T10:17:49.907 回答
0

如果你不想关心计算 width-padding-margin-doodahs-demwutwuts 的数学，你可以声明你的headers和sections，box-sizing: border-box所以你最终渲染的盒子将是声明的宽度，并且填充将被切割盒子里面。更多信息

于 2012-06-19T10:58:50.950 回答