Css 宽度100%水平溢流

我使用下面的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的分辨率

有人知道为什么吗？ 我需要指定更多的代码吗

---

谢谢

填充始终与您定义的宽度一起添加。因此，实际上您的容器将从css文件中获得100%+120px的宽度。因此，将宽度减少到100%以下。

您可以使用两个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>

标题{
宽度：100%；
高度：60px；
/*填充：60px；*//*将其移动到外部div*/
浮动：左；
背景：url（'extras/header.jpg'）repeat-x；
}
.科{
宽度：100%；
浮动：左；
/*填充：20px 60px；*//*将其移动到外部div*/
高度：760像素；
背景：url（'extras/body.jpg'）repeat-x；
}
满足于此

如果你不想关心计算宽度填充边距doodahs demwutwuts的数学问题，你可以声明你的

标题

和

部分

来设置

框大小：边框框

，这样你最终渲染的框将具有声明的宽度，并且填充物将在框内切割

但我不知道确切的百分比是多少？边距是否也会增加宽度？有解决办法吗？我需要它来拉伸整个屏幕，但考虑到填充？在后面添加另一层的最佳解决方案？最好的解决方案是将标题和部分放在div包装中，我想是的。。最好的解决方案是，添加一个宽度为100%的包装器div，在包装器div内再创建一个容器div，并在该容器div上添加填充，而不是在包装器div上。啊，好的，然后在两个div内添加标题和节？标题和部分的背景在屏幕上是否仍然是100%的？谢谢。试试这个谢谢巴德，这就是我最后想要的，因为你已经回答了这个问题。因为你的宽度总是100%+120px（由于填充），我不知道你的html是什么样子，但是请记住，宽度属性应用于它的父div。