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

我通过阅读“PRO HTML和CSS设计模式”学会了如何做这些事情。display:block是div的默认显示值，但我喜欢使其显式。容器必须是正确的类型；位置属性是固定的、相对的或绝对的。

.拉伸到边距{显示：块；位置：绝对；高度：自动；底部：0；顶部：0；左：0；右：0；页边空白：20px；边距底部：20px；右边距：80px；左边距：80px；背景色：绿色；}<div class=“stretchedToMargin”>你好，世界</div>

被Nooshu的评论弄糊涂了

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

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

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

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

.fullWidthPlusMargin {
    width: 98%;
    margin: 1%;
}

这里的主要问题是，边距将随着父元素的大小而略微增加/减少。大概您更喜欢的功能是边距保持不变，子元素增长/收缩以填充间距变化。因此，取决于你需要多紧的显示器，这可能是有问题的。（我也会选择更小的利润率，比如0.3%）。

添加-webkit和-moz更合适

-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;

另一个解决方案是使用显示：表，它具有不同的框模型行为。

您可以为父级设置高度和宽度，并在不展开的情况下添加填充。子级的高度和宽度减去填充后为100%。

JSBIN公司

另一种选择是使用方框大小属性。两者唯一的问题是它们在IE7中都不起作用。