开发者

Parent-child height problem

I have a parent div that has position: relative an开发者_运维百科d his child has position: absolute. Such positions is a must. The problem is the parent does not stretch to the height of the child. The question is how to make it stretch to the height of the child?

The mark-up is similar to this:

<!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>


Add overflow:hidden to your parent.

Edit: My mistake, this will only work if the children are floating. This cannot be achieved if the child is position absolutely. When you absolutely position an element, you're taking it out of the document flow. As far as positioning is concerned, that element is no longer a "child", even though semantically it still is.


give a height:100% to both the child and the parent.


Unfortunately, I don't think there's a way to do it, without using Javascript.

edit: Perhaps if you show why they need to be position:relative and position:absolute, we can come up with a way to remove that restriction so that what you want is possible.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜