CSS 100％高度，带填充 / 边距

#myDiv {
    width: 100%
    height: 100%;
    padding: 5px;
}

<html style="height: 100%">
    <body style="height: 100%">
        <div style="background-color: black; height: 100%; padding: 25px"></div>
    </body>
</html>

css

我阅读了 “ PRO HTML 和 CSS 设计模式 ”，了解了如何进行此类操作。 display:block是div的默认显示值，但我想使其明确。容器必须是正确的类型； position属性是fixed ， relative或absolute 。

.stretchedToMargin {
  display: block;
  position:absolute;
  height:auto;
  bottom:0;
  top:0;
  left:0;
  right:0;
  margin-top:20px;
  margin-bottom:20px;
  margin-right:80px;
  margin-left:80px;
  background-color: green;
}

<div class="stretchedToMargin">
  Hello, world
</div>

小提琴由 Nooshu 的评论

CSS3中有一个新属性，可用于更改框模型计算宽度 / 高度的方式，这称为框大小。

通过将此属性设置为 “border-box”，它使您添加边框或边框时应用的任何元素都不会拉伸。如果您定义的宽度为 100px，填充为 10px，则宽度仍为 100px。

box-sizing: border-box;

请参阅此处以获取浏览器支持。它不适用于 IE7 及更低版本，但是，我相信 Dean Edward 的IE7.js添加了对此的支持。请享用：）

解决方案是根本不使用高度和宽度！使用顶部，左侧，右侧，底部附加内部框，然后添加边距。

.box {margin:8px; position:absolute; top:0; left:0; right:0; bottom:0}

<div class="box" style="background:black">
  <div class="box" style="background:green">
    <div class="box" style="background:lightblue">
      This will show three nested boxes. Try resizing browser to see they remain nested properly.
    </div>
  </div>
</div>

更好的方法是使用 calc（）属性。因此，您的情况如下所示：

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

简单，干净，没有解决方法。只需确保您不要忘记值和运算符之间的空格（例如（100％-5px））就会破坏语法。

根据 w3c 规范，高度是指可视区域的高度，例如在 1280x1024 像素分辨率的显示器上 100％的高度 = 1024 像素。

min-height 是指包含内容的页面总高度，因此在内容大于 1024px 的页面上，min-height：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>

1. 全高，带padding

body {
  margin: 0;
}
.container {
  min-height: 100vh;
  padding: 50px;
  box-sizing: border-box;
  background: silver;
}

<div class="container">Hello world.</div>

2. 全高，有margin

body {
  margin: 0;
}
.container {
  min-height: calc(100vh - 100px);
  margin: 50px;
  background: silver;
}

<div class="container">Hello world.</div>

3. 全高带border

body {
  margin: 0;
}
.container {
  min-height: 100vh;
  border: 50px solid pink;
  box-sizing: border-box;
  background: silver;
}

<div class="container">Hello world.</div>

这是 CSS 的完全惯用语言之一 - 我尚未理解其推理（如果有人知道，请解释一下）。

100％表示容器高度的 100％- 上面添加了任何边距，边框和填充。因此，实际上不可能获得一个填充其父容器且具有边距，边框或填充的容器。

另请注意，众所周知，浏览器之间的设置高度也不一致。

自发布此书以来，我了解到的另一件事是，百分比是相对于容器的长度（即宽度）而言的，因此百分比对于高度而言甚至更不值钱了。

如今，vh 和 vw 视口单元更有用，但对于顶层容器以外的其他任何东西仍然没有特别有用。

另一种解决方案是使用 display：table，它具有不同的框模型行为。

您可以为父级设置高度和宽度，并添加填充而不扩展它。这个孩子的身高和宽度减去填充物为 100％。

吉宾

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

另一种解决方案：您可以将百分比单位用于边距和大小。例如：

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

这里的主要问题是，边距将随着父元素的大小而略微增加 / 减少。大概您希望的功能是使边距保持恒定，并且子元素增大 / 缩小以填充间距的变化。因此，根据您需要显示屏的紧度，这可能会出现问题。（我也会选择较小的利润率，例如 0.3％）。

使用flexbox的解决方案（适用于 IE11）：（或在 jsfiddle 上查看）

<html>
  <style>
    html, body {
      height: 100%; /* fix for IE11, not needed for chrome/ff */
      margin: 0; /* CSS-reset for chrome */
    }
  </style>
  <body style="display: flex;">
    <div style="background-color: black; flex: 1; margin: 25px;"></div>
  </body>
</html>

（对于实际问题， CSS 重置不一定很重要。）

重要的部分是flex: 1 （与display: flex结合使用display: flex父级display: flex ）。有趣的是，我所知道的关于 Flex 属性如何工作的最合理的解释来自于本机文档，因此无论如何我都引用它：

（...）flex：1，它告诉组件填充所有可用空间，并与同一父组件在其他组件之间平均共享

答案