填充导致水平滚动-增加宽度 [英] Padding causes horizontal scroll - it increases the 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.请看这张图片
here is the demo .
The header must have 100% width and 10px padding from left,right and bottom. please look at this picture
这是firebug的#header布局.如您所见，图像中没有正确的填充，因为在#header宽度上添加了10px填充(您可以对其进行测试).如何在不增加宽度的情况下为#header设置100％的宽度，为左侧，右侧和底部设置10px的填充?
this is the layout of #header by firebug. 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). how can I set 100% width for #header and 10px padding for left,right and bottom without increasing the width?
推荐答案
尝试一下
* , *: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 **/
}
这篇关于填充导致水平滚动-增加宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
