具有需要填充其父级的边距和填充的 div答案

【问题标题】：div with margins & padding that needs to fill its parent具有需要填充其父级的边距和填充的 div
【发布时间】：2012-02-14 01:37:28
【问题描述】：

我有一个容器 div（它的宽度和高度都设置为像素）。

有没有办法添加一个子 div 来填充它的整个父级但仍然有边距和/或填充？

假设父 div 宽 200px，高 200px。

如果我给子 div 的宽度/高度为 100%，那么它假定我的意思是内容的大小为 200px，然后如果我添加填充或边距，则子 div 的大小会变得更大，然后父母。

我希望子 div 的内容区域是在每边取出 5px 边距后剩下的内容......

并且请不要告诉我从 200px 中减去 2*5px - 我知道，但我正在寻找更好的解决方案。

会不会是css处理不了这么简单的任务……

【问题讨论】：

标签： html css

【解决方案1】：

在样式表中将所有元素设置为边框大小。

这将汇总所有元素的填充，因此如果添加任何填充，您不必担心任何中断。

*{
   box-sizing: border-box;
}

【讨论】：

【解决方案2】：

您可以设置外部 div 的填充。那么内部的 div 只会占据剩下的部分。

看看这个：(try yourself at jsFiddle)

.outer {
 width: 200px;
 height: 200px;
 background-color: #DD0000;
 padding: 5px;
 box-sizing: border-box;
}
.inner {
 width: 100%;
 height: 100%;   
 background-color: #0000DD;
}

<div class="outer">
    <div class="inner"></div>
</div>

就问题而言，这两种方式确实是等效的。请务必记住 html 和 css 标准的设置方式所产生的冗余。

【讨论】：

这将使.outer 210px 宽和高。通过将 200 更改为 190 来更正此问题基本上与以下内容相同：...请不要告诉我从 200px 中减去 2*5px ...

【解决方案3】：

您可以尝试以下方法：

#outer {
  width: 200px;
  height: 200px;
  background: blue;
  position: relative;
}

.inner {
  position: absolute;
  top: 5px;
  right: 5px;
  bottom: 5px;
  left: 5px;
}

演示：http://jsfiddle.net/wYNYh/1/

【讨论】：

我喜欢这个解决方案（即使我必须添加 4 次 5px），因为 1) 是我所要求的。 2）它不修改容器元素。谢谢。如果没有更好的解决方案会显示出来，我会接受这个答案。
如果您想要一个与#inner 相关的#insideInner div，与#inner 与#outer 相关的方式相同，您将如何处理绝对/相对位置？
您可以再次使用相同的 css。只需将 #inner 更改为 .inner 即可将其作为一个类重用。它也适用于嵌套的 div。

【解决方案4】：

类似这样的：http://jsfiddle.net/Rnf82/ ?

【讨论】：

查看 Dennis Traub 的建议答案上的评论。