Question

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

父亲的身高应该是动态的，并且会延伸到孩子定义的最大身高。 ChildRight动态改变高度，但我希望它是父级的100％高度。 ChildLeft有时会定义父级的高度。

问题是因为ChildLeft定义了父级的高度。身高：100％因为未成功，因为父母的身高未定义。请帮忙。

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

Answer 1

Equal Height Columns with Cross-Browser CSS

如果您不需要支持IE 6和7，这将是一种更好的方法：

Use CSS display:table for Layout

Answer 2

使用display: none和display: block来保持元素的大小，而不是使用visibility: hidden和visibility: visible切换可见性。

为防止物品堆叠在一起，您必须进行补偿。这可以通过将所有文章浮动到彼此的左边来实现，并且除了第一个之外都给予它们所有的负边距，以便它们都保持在相同的位置。

请参阅 this demo fiddle ，其中演示了两种情况，即高度较小的文章然后是右列，高度较高的文章则是右列。在这两种情况下，左列的高度（最大物品的高度）决定了父div的高度。

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;
}

定义父高度的子div

2 个答案: