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

本文介绍了填充导致水平滚动-增加宽度的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

请查看以下代码:

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

这篇关于填充导致水平滚动-增加宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！