0

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% 的子元素没有填充其父元素的宽度和高度呢？

4

3 回答 3

4

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

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

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

于 2013-08-01T12:27:12.043 回答
1

丹尼尔德是对的。

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

.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;
}
于 2013-08-01T12:40:20.350 回答
0

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

padding 是元素边界内部的额外空间。如果您想要外部空间，请使用边距。

您说您希望您的孩子填写父元素，并且由于填充它是父元素内部的额外空间，只要填充在那里，孩子就不会填写它的父元素。

编辑：您看不到所需结果的原因是因为您的元素具有最小高度和最小宽度，而不是实际尺寸。你需要给这个元素集大小（无论是像素还是百分比）。这是因为您的子元素没有继承其父元素的最小和最大宽度/高度。

见JSFiddle

于 2013-08-01T12:24:38.877 回答