html - 带填充增加宽度的固定 div

Question

我有一个简单的模板，我在中心显示页眉、内容和页 footer 分，页眉有背景颜色，所有内容应该在左右两侧有 30 像素的填充。

我按照以下方式调整它，但它增加了宽度。

http://codepen.io/anon/pen/xZapEE?editors=1100

html, body, form {
    height: 100%;
    background-color: #fff;
    height:100%;
}

body {
    font-family: "Open Sans","Trebuchet MS",Verdana,Arial,sans-serif;
    -webkit-font-smoothing: antialiased;
    font-size: 13px;
    line-height: 18px;
    height: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    color: #687074;
    height:100%;
    background-color: #fff;
}
.main-wrapper{
    width:1000px;
    margin:0 auto;
    position:relative;
    height:100% !important;
    padding:0 30px;
}
.header-wrapper{
    width:100%;
    min-height:200px;
    background-color:#f5f5f5;
    margin:0 auto;
    position:relative;
    padding:0 30px;
}
.content-main{
    width:1000px;
    min-height:400px;
    margin:0 auto;
    position:relative;
    height:auto;
    background-color:#ccc;
}
.footer-wrapper{
    width:1000px;
    min-height:200px;
    background-color:#f5f5f5;
    margin:0 auto;
    position:relative;
}
.header-row1{
    float:left;
    width:100%;
    height:150px;
    margin-bottom:15px;
}
.header-col1
{
float:left;
width:132px;
width:50%;

}
.header-col2
{
 float:right;
width:50%;
}
.header-col2 > h1{
  font-size:60px;
  text-align:right;  
}
.header-logo{

}
.header-row2{
    float:left;
    width:100%;
    height:30px;
    margin-bottom:15px;
    padding:0 30px;

}

Answer 1

您可以使用 box-sizing适合它:

box-sizing: border-box;

框大小值:

content-box: This is the initial and default value as specified by the CSS standard. The width and height properties are measured including only the content, but not the padding, border or margin.

border-box: The width and height properties include the padding and border, but not the margin.