需要填充其父元素的具有边距和填充的div

Question

我有一个容器 div（宽度和高度均以像素为单位设置）。

是否有一种方法可以添加一个子 div，使其填充整个父级但仍具有边距和/或填充？

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

如果我给子 div 设置 100% 的宽度/高度，则它会认为我希望内容区域的大小为 200px，然后如果我添加填充或边距，则子 div 的大小将变得大于父 div。

我希望子 div 的内容区域是在减去每侧 5px 边距后剩余的任何内容...

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

难道 CSS 无法处理这么简单的任务吗...

- epeleg

Answer 1

你可以尝试以下方法：

#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/

- Yoshi

---

我喜欢这个解决方案（尽管我不得不四次添加5像素），因为1）它做到了我要求的。 2）它不修改容器元素。谢谢。如果没有更好的解决方案出现，我会接受这个答案。 - epeleg

如果您想要一个与#inner相对应的#insideInner div，以与#inner相对于#outer相同的方式进行关联，那么您会如何处理绝对/相对位置？ - epeleg

你可以再次使用相同的 CSS。只需将 #inner 更改为 .inner，这样您就可以将其作为类重复使用。它也适用于嵌套的 div。 - Yoshi

Answer 2

在你的样式表中将所有元素设置为box-sizing:border-box。

这将总结所有元素的填充，因此如果您添加任何填充，就不必担心任何干扰。

*{
   box-sizing: border-box;
}

- dusty

---

这应该是被接受的答案；这实际上就是box-sizing属性的意图。 - dlq

Answer 3

像这样的东西：http://jsfiddle.net/Rnf82/？

- giker

---

请查看Dennis Traub建议答案下发布的评论。 - epeleg

Answer 4

你可以设置外部div的padding。然后内部div只会占用剩下的空间。

看一下这个：(在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 标准设置所生成的冗余。

- Dennis Traub

---

这将使.outer的宽度和高度为210像素。通过将200更改为190来进行更正，本质上与“...请不要告诉我从200px中减去2 * 5px...”相同。 - Yoshi