填充会导致水平滚动 - 它会增加宽度
[英]Padding causes horizontal scroll - it increases the width
问题描述
Please look at this code: 
请看这段代码：
<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>
here is the demo . 这是演示 。 The header must have 100% width and 10px padding from left,right and bottom. header必须具有100％宽度和从左，右和底部10px填充。 please look at this picture 请看这张照片
this is the layout of #header by firebug. 这是firebug的#header布局。 as you can see the right padding is not in the image because the 10px padding is added to the #header width (you can test it). 正如你所看到的那样，右边的填充不在图像中，因为10px填充被添加到#header宽度（你可以测试它）。 how can I set 100% width for #header and 10px padding for left,right and bottom without increasing the width? 如何在不增加宽度的情况下为左，右和底部设置#header和10px填充的100％宽度？
5 个解决方案
解决方案1
10 已采纳 2014-02-07 07:27:54
try this 尝试这个
* , *:before, *:after{
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
-ms-box-sizing:border-box;
}
or 要么
#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 **/
}
解决方案2
3 2016-08-04 06:51:57
The CSS calc operator may prove helpful. CSS calc运算符可能会有所帮助。 With it, you can adjust the width that can be 'thrown off' when you specify left/right padding or left/right margin. 有了它，您可以在指定左/右填充或左/右边距时调整可以“抛弃”的宽度。 Since you specified total left/right padding of 20px, then 20px would be what you need to subtract from the total with. 由于您指定了20px的总左/右填充，因此需要从总数中减去20px。
#header{
width: calc(100% - 20px);
height:100px;
position:fixed;
display:inline-block;
background-color:red;
padding:0 10px 10px 10px;
}
解决方案3
1 2014-02-07 07:24:46
try with margin .. or reduce your width with respect to your padding area. 尝试使用margin ..或相对于填充区域减小宽度。
#header{
width:98%;
height:100px;
position:fixed;
display:inline-block;
background-color:red;
margin:0 1% 10px 1%;
}
Padding 填充
The padding clears an area around the content (inside the border) of an element. 填充清除元素内容（边框内）周围的区域。 The padding is affected by the background color of the element. 填充受元素背景颜色的影响。
Margin 余量
The margin clears an area around an element (outside the border). 边距清除元素周围的区域（边界外）。 The margin does not have a background color, and is completely transparent. 边距没有背景颜色，完全透明。
解决方案4
1 2014-02-07 07:59:55
Well it seems that you want want full width with padding. 好吧，你似乎想要填充宽度的全宽。 for this you can try this code: 为此您可以尝试以下代码：
#header{
width: initial;
height:100px;
position:fixed;
display:inline-block;
background-color:red;
padding:0 10px 10px 10px;
}
i just hope this will give desire output. 我希望这会给出欲望输出。
解决方案5
1 2018-08-22 12:50:21
这应该解决你的问题overflow-x: hidden;
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.