可以说
.container{
padding:25px;
height:100%;
}
所以这里的.container将是100%+25px高度。
例如，当出现以下情况时就会出现问题:
.container{
padding:25px;
height:100%;
float:left;
}
.noPadding{ padding:0px;}
<body>
<div class="container">blah</div>
<div class="container noPadding">bleh</div>
</body>
它们的高度都是 100%，但其中一个会更大。
那么我怎样才能使它们大小相同并保持填充呢？我不知道 100%-25*2px 是多少...这取决于屏幕分辨率。
最佳答案
您可以使用 css box-sizing 属性来实现此目的:
.container{
padding:25px;
height:100%;
float:left;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
}
查看这篇文章了解更多http://www.quirksmode.org/css/box.html
关于css - 处理固定填充和灵活宽度/高度的最佳方法，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/8139168/