Question

请看这段代码：

<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填充，从左，右和底部。请看这张图片

enter image description here

这是firebug #header的布局。正如你所看到的那样，右边的填充不在图像中，因为10px填充被添加到#header宽度（你可以测试它）。如何在不增加宽度的情况下为左侧，右侧和下侧设置#header和10px填充的100％宽度？

Answer 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 **/
}

Answer 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;
}

Answer 3

尝试使用margin ..或相对于填充区域减小宽度。

#header{
    width:98%;
    height:100px;
    position:fixed;
    display:inline-block;
    background-color:red;
    margin:0 1% 10px 1%;
}

<强>填充

填充清除元素内容（边框内）周围的区域。填充受元素背景颜色的影响。

<强>保证金

边距清除元素周围的区域（边框外）。边距没有背景颜色，并且完全透明。

Answer 4

好吧，你似乎想要填充填充宽度。为此，您可以尝试以下代码：

#header{
width: initial;
height:100px;
position:fixed;
display:inline-block;
background-color:red;
padding:0 10px 10px 10px;
}

我希望这会给出欲望输出。

Answer 5

这应该可以解决您的问题overflow-x: hidden;

填充会导致水平滚动 - 它会增加宽度

5 个答案: