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

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

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

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

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

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

1.带衬垫的全高

正文{边距：0；}.容器{最小高度：100vh；填充：50px；框大小调整：边框框；背景：银色；}＜div class=“container”＞你好世界</分区>

2.带边距的全高

正文{边距：0；}.容器{最小高度：计算（100vh-100px）；边距：50px；背景：银色；}＜div class=“container”＞你好世界</分区>

3.带边框的全高

正文{边距：0；}.容器{最小高度：100vh；边框：50px实心粉色；框大小调整：边框框；背景：银色；}＜div class=“container”＞你好世界</分区>

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

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

JSBIN公司

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

弗兰克的例子让我有点困惑——这在我的情况下不起作用，因为我对定位还不够了解。需要注意的是，父容器元素需要有一个非静态位置（他提到了这一点，但我忽略了它，在他的示例中没有）。

下面是一个示例，其中子对象（给定填充和边框）使用绝对定位来100%填充父对象。父级使用相对定位，以便在保持正常流的同时为子级的位置提供参考点-下一个元素“更多内容”不受影响：

#box {
    position: relative;
    height: 300px;
    width: 600px;
}

#box p {
    position: absolute;
    border-style: dashed;
    padding: 1em;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

<div id="box">
  <p>100% height and width!</p>
</div>
<div id="more-content">
</div>

快速学习CSS定位的有用链接

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

}
</style>

添加-webkit和-moz更合适

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