使用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像素的填充，而页面不会增长到需要滚动条的程度。
根据w3c规范，高度是指可视区域的高度，例如在1280x1024像素分辨率的监视器上，100%高度=1024像素。
最小高度是指包含内容的页面的总高度，因此在内容大于1024px的页面上最小高度：100%将拉伸以包含所有内容。
另一个问题是，除了ie6之外，大多数现代浏览器都在高度和宽度上添加了填充和边框（ie6实际上很符合逻辑，但不符合规范）。这就是所谓的盒子模型。因此，如果您指定
min-height: 100%;
padding: 5px;
它实际上会给你100%+5px+5px的高度。要解决这个问题，您需要一个包装容器。
<style>
.FullHeight {
height: auto !important; /* ie 6 will ignore this */
height: 100%; /* ie 6 will use this instead of min-height */
min-height: 100%; /* ie 6 will ignore this */
}
.Padded {
padding: 5px;
}
</style>
<div class="FullHeight">
<div class="Padded">
Hello i am padded.
</div
</div>
使用flexbox（在IE11上工作）的解决方案：（或jsfiddle上的视图）
<html>
<style>
html, body {
height: 100%; /* fix for IE11, not needed for chrome/ff */
margin: 0; /* CSS-reset for chrome */
}
</style>
<body style="display: flex;">
<div style="background-color: black; flex: 1; margin: 25px;"></div>
</body>
</html>
（CSS重置对于实际问题并不一定重要。）
重要的部分是flex:1（与父级的display:flex结合使用）。有趣的是，我所知道的关于Flex属性如何工作的最合理的解释来自一个react原生文档，所以我还是引用了它：
（…）flex:1，告诉组件填充所有可用空间，在具有相同父组件的其他组件之间均匀共享
