Child div defining Parent height_问答_开发者_运维开发者技术经验分享

开发者 https://www.devze.com 2023-03-22 04:44 出处：网络

相关专题：css

<body>
<div id="parent">
    <div id="childRightCol"></div>
    <div id="childLeftCol"></div>
</div>
</body>

Parent's height is suppose to be dynamic开发者_运维知识库 and stretches to the max height defined by the child. ChildRight dynamically changes height but I want it to be 100% height of parent. ChildLeft some times defines the height of parent.

The problem is that because ChildLeft defines the height of the parent. Height:100% on childright doesn't work because parent's height isn't defined. Please help.

id="news-flicker-container"
id="news-flicker-userbars"

Instead of using display: none and display: block to toggle visibility, use visibility: hidden and visibility: visible which keeps the size of the elements.

To prevent the articles form stacking on top of each other, you have to compensate. This can be achieved by floating all the articles to the left of each other, and give them all but the first a negative margin so they all remain at the same location.

See this demo fiddle which demonstrates two situations, i.e. an article with less height then the right column and one with larger height then the right column. In both cases the height of the left column (the height of the largest article) decides the height of the parent div.

The basic requirements for the CSS:

#news-flicker-container {
    float: left;
}
#news-flicker-userbars {
    float: left;
}
#news-flicker-container article {
    width: 100%;
    visibility: hidden;
    float: left;
    margin-left: -100%;
}
#news-flicker-container article:first-child {
    margin-left: 0;
}

Equal Height Columns with Cross-Browser CSS

If you don't need to support IE 6 and 7, this would be a better approach:

Use CSS display:table for Layout