更好的方法是使用calc（）属性。因此，您的案例看起来像：

#myDiv {
    width: calc(100% - 10px);
    height: calc(100% - 10px);
    padding: 5px;
}

简单、干净，没有变通办法。只需确保不要忘记值和运算符之间的空格（例如（100%-5px），这会破坏语法。享受

这是CSS的一个彻头彻尾的白痴——我还没有理解其中的原因（如果有人知道，请解释）。

100%表示容器高度的100%，其中添加了任何边距、边框和填充。因此，实际上不可能获得一个填充其父级并且具有边距、边框或填充的容器。

另外，众所周知，浏览器之间的设置高度也不一致。

自从我发布这篇文章以来，我学到的另一件事是，百分比是相对于容器长度的，也就是说，它的宽度，这使得百分比对于高度来说更没有价值。

如今，vh和vw视口单元更有用，但对于除了顶级容器之外的任何其他对象来说仍然不是特别有用。

这是display:block的默认行为。2020年修复它的最快方法是设置父元素的display:'flex'和填充，例如20px，那么它的所有子元素将具有相对于其高度的100%高度。

  <style type="text/css">
.stretchedToMargin {
    position:absolute;
    width:100%;
    height:100%;

}
</style>

根据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>

更好的方法是使用calc（）属性。因此，您的案例看起来像：

#myDiv {
    width: calc(100% - 10px);
    height: calc(100% - 10px);
    padding: 5px;
}

简单、干净，没有变通办法。只需确保不要忘记值和运算符之间的空格（例如（100%-5px），这会破坏语法。享受