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.
加载中,请稍侯......
精彩评论