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

下面是一个示例，其中子对象（给定填充和边框）使用绝对定位来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定位的有用链接

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

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

被Nooshu的评论弄糊涂了

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

下面是一个示例，其中子对象（给定填充和边框）使用绝对定位来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定位的有用链接

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

.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>

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

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

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

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

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

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

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

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

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