如何扩展浮动子div的高度到父母的高度?

我有页面结构为:

<div class="parent">
    <div class="child-left floatLeft">
    </div>

    <div class="child-right floatLeft">
    </div>
</div>

现在，左子DIV将有更多的内容，因此父DIV的高度会随着子DIV的增加而增加。

但问题是适合儿童的身高并没有增加。如何让它的高度等于它的父结点?

当前回答

<div class="parent" style="height:500px;">
<div class="child-left floatLeft" style="height:100%">
</div>

<div class="child-right floatLeft" style="height:100%">
</div>
</div>

我使用内联样式只是为了表达想法。

2016-10-25 18:49:10

其他回答

CSS表显示是理想的:

.parent { 显示:表; 宽度:100%; ｝ .parent > div { 显示:表格单元; } .child-left { 背景:浅蓝色; } .child-right { 背景:番木瓜; } < div class = "父" > < div class = "让孩子“> < / div > < div class = "生" >高< br >高< / div > < / div >

原来的答案(假设任何一列都可以更高):

你试图让父结点的高度依赖于子结点的高度而子结点的高度依赖于父结点的高度。不会计算。CSS Faux列是最好的解决方案。有不止一种方法。我宁愿不使用JavaScript。

2011-01-26 13:05:58

我找到了很多答案，但可能对我来说最好的解决方案是

.parent { 
  overflow: hidden; 
}
.parent .floatLeft {
  # your other styles
  float: left;
  margin-bottom: -99999px;
  padding-bottom: 99999px;
}

你可以在这里查看其他解决方案http://css-tricks.com/fluid-width-equal-height-columns/

2013-02-19 08:26:41

<div class="parent" style="height:500px;">
<div class="child-left floatLeft" style="height:100%">
</div>

<div class="child-right floatLeft" style="height:100%">
</div>
</div>

我使用内联样式只是为了表达想法。

2016-10-25 18:49:10

父结点有身高吗?如果你像这样设置父结点高度。

div.parent { height: 300px };

然后你可以让孩子像这样伸展到全身高度。

div.child-right { height: 100% };

EDIT

下面是如何使用JavaScript实现的。

2011-01-26 12:37:57

请将父div设置为overflow: hidden 然后在儿童潜水你可以设置大量填充底部。例如 padding-bottom: 5000像素然后margin-bottom: -5000px 然后所有子div都是父节点的高度。当然，这不会工作，如果你试图把内容放在父div(外面的其他div是)

.parent{ border: 1px solid black; overflow: hidden; height: auto; } .child{ float: left; padding-bottom: 1500px; margin-bottom: -1500px; } .child1{ background: red; padding-right: 10px; } .child2{ background: green; padding-left: 10px; } <div class="parent"> <div class="child1 child"> One line text in child1 </div> <div class="child2 child"> Three line text in child2<br /> Three line text in child2<br /> Three line text in child2 </div> </div>

例如:http://jsfiddle.net/Tareqdhk/DAFEC/

2012-11-02 06:10:20

如何扩展浮动子div的高度到父母的高度?

推荐文章

最新文章

标签