子元素div如何撑满父元素div的高度？

Question

我有一个非常简单的场景

父级Div（高度未指定）

子div具有一些内容并将高度设置为100%。

现在，这个子div强制其父级拉伸到整个浏览器窗口。

请指导。

- user831174

---

如果您想让父级 div 为 100%，为什么不将其指定为 100% 呢？ - Mooseman

这是默认行为。您甚至不需要将高度设置为100％。或者我可能误解了问题。请详细说明... - Pevara

请将您的HTML/CSS代码包含在问题中。 - James Montagne

我相信问题是如何防止这种行为。 - Username Obfuscation

Answer 1

在两者上设置位置。

#ParentDiv {
    position:relative;
    height:auto;
}

#ChildDiv {
    position:absolute;
    /* top/left/right force it to dimensions of parent, if needed */
    top:0;
    left:0;
    right:0;
    height:100%;
}

父元素会被拉伸以适应子元素。

- PlantTheIdea

Answer 2

#ParentDiv {
    position:relative;
    height:auto;
}
#ChildDiv {
    position:absolute;
    /* top/left/right force it to dimensions of parent, if needed */
    top:0;
    left:0;
    right:0;
    height:100%;
}

您的ParentDiv高度是自动的，因此子元素会迫使父级DIV扩展到浏览器高度的100％。去掉父DIV的自动属性即可解决问题。

- CyberBoy

---

当未指定高度时，auto是高度的默认值。因此，在这里删除height:auto将没有任何影响。您引用的代码来自答案，而不是问题本身。 - Username Obfuscation