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

}
</style>

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

CSS3中有一个新属性，您可以使用它来更改长方体模型计算宽度/高度的方式，称为长方体大小。

通过将此属性设置为值“border box”，可以在添加填充或边框时使应用它的任何元素都不会拉伸。如果你定义了100px宽，10px填充的东西，它仍然是100px宽。

box-sizing: border-box;

有关浏览器支持，请参阅此处。它不适用于IE7或更低版本，但是，我相信Dean Edward的IE7.js为它添加了支持

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

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

1.带衬垫的全高

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

2.带边距的全高

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

3.带边框的全高

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

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