Question

HTML：

<div class="content">
    <div class="card">
    </div>
</div>

CSS：

.content {
    min-height: 350px;
    min-width: 320px;
    max-width: 350px;
    padding: 15px;
}

.card {
    width: 100%;
    height: 100%;
    background-color: black;
}

http://jsfiddle.net/aJhEF/1/

使用控制台检查时，它显示.content具有正常的宽度和高度。那么为什么子元素的宽度和高度被设置为100％而不是填充其父元素的宽度和高度？

Answer 1

子元素不会继承父元素min-height属性

这就是.card元素的高度为0

的原因

就宽度而言，.card 确实填写它的父级宽度。

Answer 2

Danield是对的。

您可以通过使用相对和绝对位置以及负边距（以补偿填充）来解决此问题：

.content {
    min-height: 350px;
    min-width: 320px;
    max-width: 350px;
    padding: 15px;
    position: relative;
}

.card {
    width: 100%;
    height: 100%;
    background-color: black;
    position: absolute;
    margin: -15px;
}

Answer 3

因为您为父级提供了一个设置填充。删除padding: 15px;以填写div。

填充是元素边框内部的额外空间。如果你想在外面留出空间，请使用保证金。

你声明你希望你的孩子填写父元素，因为填充它是父元素内部的额外空间，只要填充在那里，孩子就不会填写它的父元素。

编辑：您没有看到所需结果的原因是因为您的元素是最小高度和最小宽度而不是实际尺寸。您需要提供此元素集大小（可以是像素或％）。这是因为你的子元素没有继承它的父元素的最小和最大宽度/高度。

请参阅JSFiddle

为什么min / max宽度/高度值不允许元素填写其父div？

3 个答案: