填充会导致水平滚动 - 它会增加宽度
M a*_*a D 2 html css padding width
请看这段代码:
<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>
这是演示.的header必须具有100%的宽度,并且从左侧,右侧和底部10px的填充.请看这张照片
这是#header萤火虫的布局.正如你所看到的那样,右边的填充不在图像中,因为10px填充被添加到#header宽度中(你可以测试它).如何在#header不增加宽度的情况下为左,右和底设置100%宽度和10px填充？
jig*_*eni 11
试试这个
* , *: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 **/
}
小智 6
CSS 计算运算符可能会有所帮助。有了它，您可以调整当您指定左/右填充或左/右边距时可以“抛弃”的宽度。由于您指定的总左/右内边距为 20px，那么您需要从总数中减去 20px。
#header{
width: calc(100% - 20px);
height:100px;
position:fixed;
display:inline-block;
background-color:red;
padding:0 10px 10px 10px;
}