CSS 100％高度，填充 / 边距

这让我疯狂了好几天了，但实际上这是我在过去几年中一直存在的问题：使用 HTML / CSS 我怎样才能制作出具有宽度和 / 或宽度的元素高度是它的父元素的 100％，仍然有适当的填充或边距？

通过 “正确” 我的意思是，如果我的父元素是200px高，我指定height = 100% ， padding = 5px我希望我应该获得一个190px高元素， border = 5px的所有边，很好地居中在父元素。

现在，我知道那不是标准盒子模型指定它应该如何工作（虽然我想知道为什么，确切地说......），所以明显的答案不起作用：

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

但在我看来，必须有一些方法可以为任意大小的父母可靠地产生这种效果。有谁知道完成这个（看似简单）任务的方法？

哦，为了记录，我对 IE 兼容性并不十分感兴趣，所以应该（希望）让事情变得更容易一些。

编辑：自从一个例子被要求，这是我能想到的最简单的一个：

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

接下来的挑战是让黑盒子在所有边缘都显示 25 像素的填充，而页面不会变得足够大以至于需要滚动条。

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>