使html页面不随倍数变化,CSS Div宽度百分比和填充,不破坏布局

如果你想#header与你的容器相同的宽度，有10px的填充，你可以省略它的宽度声明。这将导致它隐式占用其整个父的宽度(因为div是默认的块级元素)。

然后，由于你没有定义一个宽度，10px的填充将正确应用于元素内部，而不是添加到其宽度：

#container {

position: relative;

width: 80%;

}

#header {

position: relative;

height: 50px;

padding: 10px;

}

使用百分比宽度和像素填充/边距时的键不是在同一元素上定义它们(如果要精确控制大小)。将百分比宽度应用于父项，然后将像素填充/边距应用于display：block child，没有设置宽度。

更新

处理这个的另一个选择是使用box-sizing CSS规则：

#container {

-webkit-Box-sizing: border-Box; /* Safari/Chrome,other WebKit */

-moz-Box-sizing: border-Box; /* Firefox,other Gecko */

Box-sizing: border-Box; /* Opera/IE 8+ */

/* Since this element now uses border-Box sizing,the 10px of horizontal

padding will be drawn inside the 80% width */

width: 80%;

padding: 0 10px;

}