css100%如何均分5份,CSS 100％高度，填充/边距

这让我疯狂了好几天了，但实际上这是我在过去几年中一直存在的问题：使用HTML / CSS我怎样才能制作出具有宽度和/或宽度的元素高度是它的父元素的100％，仍然有适当的填充或边距？

通过“正确”我的意思是，如果我的父元素是200px高，我指定height = 100% ， padding = 5px我希望我应该获得一个190px高元素， border = 5px的所有边，很好地居中在父元素。

现在，我知道那不是标准盒子模型指定它应该如何工作(虽然我想知道为什么，确切地说......)，所以明显的答案不起作用：

#myDiv {

width: 100%

height: 100%;

padding: 5px;

}

但在我看来，必须有一些方法可以为任意大小的父母可靠地产生这种效果。 有谁知道完成这个(看似简单)任务的方法？

哦，为了记录，我对IE兼容性并不十分感兴趣，所以应该(希望)让事情变得更容易一些。

编辑：自从一个例子被要求，这是我能想到的最简单的一个：

接下来的挑战是让黑盒子在所有边缘都显示25像素的填充，而页面不会变得足够大以至于需要滚动条。

#1楼

另一种解决方案是使用display：table，它具有不同的盒子模型行为。

您可以为父级设置高度和宽度，并添加填充而不扩展它。 孩子有100％的身高和宽度减去填充物。

另一种选择是使用盒子大小的属性。 只有两者的问题是它们在IE7中不起作用。

#2楼

更好的方法是使用calc()属性。 所以你的情况看起来像：

#myDiv {

width: calc(100% - 5px);

height: calc(100% - 5px);

padding: 5px;

}

简单，干净，没有解决方法。 只要确保你不要忘记值和操作符之间的空格(例如(100％-5px)会破坏语法。享受！

#3楼

另一种解决方案：您可以使用百分比单位作为边距和尺寸。 例如：

.fullWidthPlusMargin {

width: 98%;

margin: 1%;

}

这里的主要问题是边距将随着父元素的大小而略微增加/减少。 据推测，您希望的功能是边距保持不变，子元素增长/缩小以填充间距变化。 因此，根据您需要显示器的紧张程度，这可能会有问题。 (我也会选择较小的保证金，比如0.3％)。

#4楼

解决方案是根本不使用高度和宽度！ 使用顶部，左侧，右侧，底部连接内部框，然后添加边距。

.box {margin:8px; position:absolute; top:0; left:0; right:0; bottom:0}

#5楼

CSS3中有一个新属性可用于更改框模型计算宽度/高度的方式，它称为框大小。

通过使用值“border-box”设置此属性，当您添加填充或边框时，它会使您应用它的任何元素都不会拉伸。 如果你定义100px宽度和10px填充的东西，它仍然是100px宽。

box-sizing: border-box;

请参阅此处获取浏览器支持 它不适用于IE7及更低版本，但我相信Dean Edward的IE7.js增加了对它的支持。 请享用 ：)