Fatal编程技术网
  • css/
  • Css 亲子身高问题

Css 亲子身高问题

css

Css 亲子身高问题,css,Css,我有一个父div，它有position:relative，他的孩子有position:absolute。这种立场是必须的。问题是父母没有伸展到孩子的高度。问题是如何让它伸展到孩子的高度 加价与此类似： <!DOCTYPE HTML> <html> <head> <style> .parent { position: relative; b

我有一个父div，它有
position:relative
，他的孩子有
position:absolute
。这种立场是必须的。问题是父母没有伸展到孩子的高度。问题是如何让它伸展到孩子的高度

加价与此类似：

<!DOCTYPE HTML>
<html>
    <head>
        <style>
            .parent {
                position: relative;
                border: solid 1px red;
            }

            .child {
                position: absolute;
                border: solid 1px red;
            }
        </style>
    </head>
    <body>
        <div class="parent">
            <div class="child">Hello World!</div>
        </div>
    </body>
</html>


.家长{
位置：相对位置；
边框：实心1px红色；
}
.孩子{
位置：绝对位置；
边框：实心1px红色；
}
你好，世界！
向您的家长添加
溢出：隐藏


编辑：我的错误，这仅在子对象浮动时有效。如果孩子处于绝对位置，这是无法实现的。当您完全定位一个元素时，您将其从文档流中取出。就定位而言，该元素不再是“子元素”，即使在语义上它仍然是。
给子元素和父元素一个
高度：100%
。
不幸的是，如果不使用Javascript，我认为没有办法做到这一点


编辑：如果你能说明为什么它们需要是位置：相对的和位置：绝对的，我们可以想出一种方法来消除这种限制，这样你就可以得到你想要的。
这有什么帮助？我需要让父母伸展到孩子的高度。我不想隐藏它的内容…添加
overflow:hidden
是有效的，因为它告诉DOM元素hasLayout=true。许多DOM元素完全忽略高度设置，除非明确指示它们这样做。@Jarrett它不起作用。使用overflow:hidden不会更改父元素的维度。它只会隐藏所有超出元素边界的内容；它不起作用。我把这个问题误认为是使用流动儿童，而不是绝对定位儿童。我已经更新了我的答案来反映这一点。这个猜测也没有帮助。只有当两个元素都是块（非内联）元素时，这才有效。div是块元素，但它不能解决问题。请看