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

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

JSBIN公司

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

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

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

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

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

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

被Nooshu的评论弄糊涂了

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

div周围的边框，而不是页面正文边距

另一个解决方案-我只是希望在页面边缘周围有一个简单的边框，当内容小于此值时，我希望有100%的高度。

边框不起作用，固定的位置似乎不适合这种简单的需求。

我最终在容器中添加了一个边框，而不是依赖页面主体的边距——它看起来像这样：

body, html {
    height: 100%;
    margin: 0;
}

.container {
    width: 100%;
    min-height: 100%;
    border: 8px solid #564333;
}

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

.box｛margin:8px；位置：绝对；顶部：0；左侧：0；右侧：0；底部：0｝<div class=“box”style=“background:black”><div class=“box”style=“background:green”><div class=“box”style=“background:lightblue”>这将显示三个嵌套框。尝试调整浏览器大小以查看它们是否保持正确嵌套。</div></div></div>