父div的高度为零,即使其子div的高度有限

看来你有个案子 clearfix class 。

所以我猜你是在浮动子div,这就是为什么父div的高度是0。 使用浮动时,父对象不会适应子对象的高度。

您可以将“clearfix”类应用于浮动元素的父级(当然,您需要在样式表中包含它),它将添加一个“insivible”最后。然后,您的父母将拥有正确的身高。

注意,它是跨平台的,兼容IE6+,Chrome,Safari,Firefox,你能想到的!

.clearfix:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

.clearfix {
    display: inline-block;
}

html[xmlns] .clearfix {
    display: block;
}

* html .clearfix {
    height: 1%;
}

尝试将以下内容添加到样式表中:

#parentdiv:after { 
    content: " "; 
    display: block;
    clear: both;
} 

正如Daedalus在他的评论中所建议的那样,你可能是在浮动child divs。如果是这样的话,上面的行就修复了它。

浮动对象时的问题是它们的父元素“忽略”了它们。

上面的行创建了一个(pseudo-)元素并将其插入到#parentdiv中,该元素被向下推过所有浮动的div。然后,父div虽然忽略了浮动的子元素,但并没有忽略这个伪元素——正如它应该做的那样,它扩展以包含伪元素。现在,由于pseudo元素位于所有浮动子元素的下方,父div会发生,或者更好的是,似乎也“包含”浮动子元素——这正是您真正想要的。

@Joo Paulo Macedo的作品,在一个风格化的div中实现:

export const HeadroomWrapper = styled('div')`
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: white;
    z-index: 2;
    &:after { 
        content: " ";
        display: block;
        clear: both;
        height: 1px;
    }
`;