具有填充/边距的CSS 100％高度
这让我疯狂了几天，但实际上这是我过去几年碰到的一个问题：使用HTML / CSS我如何制作一个宽度和/或宽度的元素高度是它的父元素的100％，仍然有适当的填充或边距？
“适当的”我的意思是，如果我的父元素是200px高，我指定height = 100% padding = 5px我期望我应该得到一个190px高的元素与border = 5px在所有方面，很好地集中在父元素。
现在，我知道那不是标准框模型应该如何指定它应该工作的（尽管我想知道为什么，正是......），所以显而易见的答案不起作用：
#myDiv {
width: 100%
height: 100%;
padding: 5px;
}
但在我看来，对于任意大小的父母来说，必定有某种方法可靠地产生这种效果。 有没有人知道完成这个（看似简单）任务的方法？
哦，并且为了记录，我对IE兼容性不感兴趣，所以应该（希望）让事情变得更简单。
编辑：由于一个例子被要求，这里是我能想到的最简单的一个：
<html style="height: 100%">
<body style="height: 100%">
<div style="background-color: black; height: 100%; padding: 25px"></div>
</body>
</html>
接下来的挑战是如何让黑盒子在所有边缘上显示25像素的填充，而不会使页面变得足够大以至于不需要滚动条。
我学会了如何做这些事情阅读“PRO HTML和CSS设计模式”。 display:block是div的默认显示值，但我希望将其显式化。 容器必须是正确的类型; position属性是fixed ， relative或absolute 。
.stretchedToMargin {
display: block;
position:absolute;
height:auto;
bottom:0;
top:0;
left:0;
right:0;
margin-top:20px;
margin-bottom:20px;
margin-right:80px;
margin-left:80px;
background-color: green;
}<div class="stretchedToMargin">
Hello, world
</div>CSS3中有一个新属性，可以用它来改变盒子模型计算宽度/高度的方式，这就是所谓的盒子大小。
通过使用值“border-box”设置此属性，它将使您应用它的任何元素在添加填充或边框时不会伸展。 如果你定义了100px宽度和10px填充的东西，它仍然是100px宽。
box-sizing: border-box;
在这里查看浏览器支持。 它不适用于IE7及更低版本，但是，我相信Dean Edward的IE7.js增加了对它的支持。 请享用 ：）
解决方案是不使用高度和宽度！ 使用顶部，左侧，右侧，底部连接内框，然后添加边距。
.box {margin:8px; position:absolute; top:0; left:0; right:0; bottom:0}<div class="box" style="background:black">
<div class="box" style="background:green">
<div class="box" style="background:lightblue">
This will show three nested boxes. Try resizing browser to see they remain nested properly.
</div>
</div>
</div>