我如何扩展浮动子div's高度父母's高度?

小开

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

div.parent { height: 300px };

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

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

编辑

以下是如何使用JavaScript来实现的

小开

我最近在我的网站上用jQuery做了这个。该代码计算最高div的高度，并将其他div设置为相同的高度。技巧如下:

http://www.broken-links.com/2009/01/20/very-quick-equal-height-columns-in-jquery/

我不相信height:100%将工作，所以如果你不显式地知道div高度，我不认为有一个纯CSS解决方案。

小开

最佳答案

对于parent元素，添加以下属性:

.parent {
overflow: hidden;
position: relative;
width: 100%;
}

然后对于.child-right这些:

.child-right {
background:green;
height: 100%;
width: 50%;
position: absolute;
right: 0;
top: 0;
}

使用CSS示例在这里和有关等高列在这里的更多信息查找更详细的结果。

小开

CSS表显示是理想的:

.

.parent {
display: table;
width: 100%;
}
.parent > div {
display: table-cell;
}
.child-left {
background: powderblue;
}
.child-right {
background: papayawhip;
}

<div class="parent">
<div class="child-left">Short</div>
<div class="child-right">Tall<br>Tall</div>
</div>

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

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

小开

这个问题的一个常见解决方案是使用绝对定位或裁剪浮点数，但这很棘手，因为如果列的数量+大小发生变化，就需要进行大量调优，并且需要确保“主”列始终是最长的。相反，我建议你使用以下三种更可靠的解决方案之一:

display: flex:到目前为止最简单&最好的解决方案非常灵活-但IE9和更老版本不支持。
table或display: table:非常简单，非常兼容(几乎适用于所有浏览器)，非常灵活。
display: inline-block; width:50%与负边距hack:相当简单，但列底部边界有点棘手。

1. `display:flex`

这真的很简单，而且很容易适应更复杂或更详细的布局-但flexbox只支持IE10或更高版本(除了其他现代浏览器)。

例子: http://output.jsbin.com/hetunujuma/1

相关html: 

<div class="parent"><div>column 1</div><div>column 2</div></div>

相关css: 

.parent { display: -ms-flex; display: -webkit-flex; display: flex; }
.parent>div { flex:1; }

Flexbox支持更多选项，但只要上面有任意数量的列就足够了!

2.`<table>`或`display: table`

一个简单的&非常兼容的方法是使用table - 如果您需要老式的ie支持，我建议您先尝试一下。你在处理列;Divs + float并不是最好的方法(更不用说为了绕过CSS限制而使用多层嵌套的Divs几乎比使用一个简单的表更“语义”)。如果你不想使用table元素，考虑css display: table (IE7及更老版本不支持)。

例子: http://jsfiddle.net/emn13/7FFp3/

相关html: (但可以考虑使用普通的<table>代替)

<div class="parent"><div>column 1</div><div>column 2</div></div>

相关css: 

.parent { display: table; }
.parent > div {display: table-cell; width:50%; }
/*omit width:50% for auto-scaled column widths*/

这种方法比使用带有浮动的overflow:hidden要健壮得多。你可以添加任意数量的列;如果你想要，你可以拥有它们自动扩展;并且可以保持与老式浏览器的兼容性。与float解决方案不同，你也不需要知道事先哪一列最长;高度的比例很好。

吻:不使用浮点hack，除非你特别需要。如果IE7是一个问题，我仍然会选择一个带有语义列的普通表，而不是一个难以维护、不那么灵活的css解决方案。

顺便说一下，如果你需要你的布局是响应式的(例如，在小型移动电话上没有列)，你可以使用@media查询在小屏幕宽度上回落到普通块布局-无论你使用<table>还是任何其他display: table元素，这都是有效的。

3.`display:inline block`与负边际hack。

另一个替代方法是使用display:inline block。

例子: http://jsbin.com/ovuqes/2/edit

相关html: (在div标记之间没有空格是很重要的!)

<div class="parent"><div><div>column 1</div></div><div><div>column 2</div></div></div>

相关css: 

.parent {
position: relative; width: 100%; white-space: nowrap; overflow: hidden;
}


.parent>div {
display:inline-block; width:50%; white-space:normal; vertical-align:top;
}


.parent>div>div {
padding-bottom: 32768px; margin-bottom: -32768px;
}

这有点棘手，负边距意味着列的“真实”底部被掩盖了。这反过来意味着你不能相对于这些列的底部定位任何东西，因为这被overflow: hidden截断了。注意，除了内联块之外，还可以使用浮动实现类似的效果。

博士TL;:如果可以忽略IE9或更老版本，则使用flexbox;否则，尝试(css)表。如果这两种方法都不适合你，那就存在一些负面的边际问题，但这也会导致一些在开发过程中很容易被忽略的奇怪的显示问题，并且你还需要注意一些布局限制。

小开

请设置父div为overflow: hidden
然后在儿童潜水你可以设置大量填充底部。例如 padding-bottom: 5000px 然后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/

小开

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

.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/

小开

对于父节点:

display: flex;

儿童:

align-items: stretch;

你应该添加一些前缀，检查caniuse。

小开

我在评论区用了这个:

.

.parent {
display: flex;
float: left;
border-top:2px solid black;
width:635px;
margin:10px 0px 0px 0px;
padding:0px 20px 0px 20px;
background-color: rgba(255,255,255,0.5);
}
    

.child-left {
align-items: stretch;
float: left;
width:135px;
padding:10px 10px 10px 0px;
height:inherit;
border-right:2px solid black;
}


.child-right {
align-items: stretch;
float: left;
width:468px;
padding:10px;
}

<div class="parent">
<div class="child-left">Short</div>
<div class="child-right">Tall<br>Tall</div>
</div>

您可以将child-right浮动到右边，但在这种情况下，我已经精确地计算了每个div的宽度。

小开

如果你了解bootstrap，你可以通过使用'flex'属性轻松完成。你所需要做的就是将下面的css属性传递给父div

.homepageSection {
overflow: hidden;
height: auto;
display: flex;
flex-flow: row;
}

.homepageSection是我的父div。现在在html中添加子div作为

<div class="abc col-md-6">
<div class="abc col-md-6">

abc是我的子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>

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

小开

我是在一次实习面试中学会这个妙招的。最初的问题是如何确保三列中每个顶部组件的高度具有相同的高度，以显示所有可用的内容。基本上创建一个不可见的子组件，呈现最大可能的高度。

<div class="parent">
<div class="assert-height invisible">
<!-- content -->
</div>
<div class="shown">
<!-- content -->
</div>
</div>

小开

我可以看到接受的答案使用position: absolute;而不是float: left。如果你想用下面的结构来使用float: left，

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

将position: auto;赋给父对象，这样它将包含子对象的高度。

.parent {
position: auto;
}
.floatLeft {
float: left
}

我如何扩展浮动子div's高度父母's高度?

1. display:flex

2.<table>或display: table

3.display:inline block与负边际hack。

1. `display:flex`

2.`<table>`或`display: table`

3.`display:inline block`与负边际hack。