Question

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

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

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

如果我给孩子div的宽度/高度为100％那么它假设我的意思是内容的大小为200px然后如果我添加填充或边距，则孩子的大小变得大于父节点。

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

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

可能是css无法处理这么简单的任务......

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/

Answer 2

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

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

durationLabelText:

Answer 3

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

Answer 4

您可以设置外部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标准的设置方式所产生的冗余非常重要。

div与边缘＆amp;填充需要填充其父级

4 个答案: