填充导致水平滚动 - 它增加了宽度
Posted
技术标签:
【中文标题】填充导致水平滚动 - 它增加了宽度【英文标题】：Padding causes horizontal scroll - it increases the width 【发布时间】：2014-03-04 12:01:26 【问题描述】：请看这段代码：
<html>
<head>
<style type="text/css">
html, body
width:100%;
height:100%;
margin:0px;
#header
width:100%;
height:100px;
position:fixed;
display:inline-block;
background-color:red;
padding:0 10px 10px 10px;
</style>
</head>
<body>
<div id="header">
<div id="header-container">
</div>
</div>
</body>
</html>
这里是 demo 。
header 必须有 100% 的宽度和从左、右和底部的 10px 填充。请看这张图
这是 firebug 对#header 的布局。如您所见，图像中没有正确的填充，因为 10px 填充已添加到 #header 宽度（您可以对其进行测试）。如何在不增加宽度的情况下为#header 设置 100% 宽度和为左、右和下设置 10px 填充？
【问题讨论】：
【参考方案1】：试试这个
* , *:before, *:after
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
-ms-box-sizing:border-box;
或
#header
width:100%;
height:100px;
position:fixed;
display:inline-block;
background-color:red;
padding:0 10px 10px 10px;
box-sizing:border-box; /** add this **/
-moz-box-sizing:border-box; /** add this **/
-webkit-box-sizing:border-box; /** add this **/
-ms-box-sizing:border-box; /** add this **/
【讨论】：
只是给遇到这个问题的人的提示，似乎在这一点上几乎所有浏览器都支持主 box-sizing:border-box;版本，因此大多数用户可能不需要 -mox-、-webkit- 和 -ms- 前缀。无论如何，我想它们仍然有助于最大限度地提高兼容性。【参考方案2】：CSS calc 运算符可能会很有帮助。有了它，您可以在指定左/右填充或左/右页边距时调整可以“丢弃”的宽度。由于您指定了 20px 的总左/右填充，因此您需要从总数中减去 20px。
#header
width: calc(100% - 20px);
height:100px;
position:fixed;
display:inline-block;
background-color:red;
padding:0 10px 10px 10px;
【讨论】：
【参考方案3】：尝试使用margin .. 或减少相对于填充区域的宽度。
#header
width:98%;
height:100px;
position:fixed;
display:inline-block;
background-color:red;
margin:0 1% 10px 1%;
填充
填充清除元素内容周围（边框内）的区域。内边距受元素背景颜色的影响。
保证金
边距清除元素周围的区域（边界外）。边距没有背景色，完全透明。
【讨论】：
感谢您的回复，那么header和header-container的宽度必须是多少？【参考方案4】：
好吧，您似乎想要带填充的全宽。为此，您可以尝试以下代码：
#header
width: initial;
height:100px;
position:fixed;
display:inline-block;
background-color:red;
padding:0 10px 10px 10px;
我只是希望这会产生欲望输出。
【讨论】：
【参考方案5】：这应该可以解决您的问题overflow-x: hidden;
【讨论】：
以上是关于填充导致水平滚动 - 它增加了宽度的主要内容，如果未能解决你的问题，请参考以下文章