Menu
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. please look at this picture
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?
388
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 **/
}
The CSS calc operator may prove helpful. 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.
#header{
width: calc(100% - 20px);
height:100px;
position:fixed;
display:inline-block;
background-color:red;
padding:0 10px 10px 10px;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
