CSS - 将float子DIV高度展开为父级的高度

Question

我的页面结构如下:

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

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

现在,child-leftDIV将拥有更多内容,因此parentDIV的高度会根据孩子的DIV而增加.

但问题是child-right身高并没有增加.我怎样才能使它的高度等于它的父母？

Answer 1

对于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的例子更详细的结果这里约等于身高列的详细信息在这里.

Answer 2

这个问题的一个常见解决方案是使用绝对定位或裁剪浮动,但这些都很棘手,因为如果您的列数量和大小发生变化,它们需要进行大量调整,并且您需要确保"主"列总是最长.相反,我建议你使用三个更强大的解决方案之一:

1. display: flex:到目前为止最简单和最好的解决方案并且非常灵活 - 但IE9和更老版本不支持.
2. table或者display: table:非常简单,非常兼容(几乎每个浏览器都有),非常灵活.
3. display: inline-block; width:50% 带有负边距的黑客:非常简单,但是柱底边框有点棘手.

1. display:flex

这非常简单,并且很容易适应更复杂或更详细的布局 - 但是只有IE10或更高版本(除了其他现代浏览器之外)才支持flexbox.

示例: 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 + floats根本不是最好的方法(更不用说多个级别的嵌套div只是为了破解css限制而不仅仅是"语义"而不仅仅是使用一个简单的表).如果您不想使用该table元素,请考虑使用cssdisplay: 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浮点数更加强大.您可以添加几乎任意数量的列; 如果你愿意,你可以让它们自动缩放 ; 并保持与古代浏览器的兼容性.与浮点解决方案不同,您也不需要事先知道哪个列最长; 高度尺度很好.

吻:除非你特别需要,否则不要使用漂浮黑客.如果IE7是一个问题,我仍然会选择一个带有语义列的普通表,而不是任何一天难以维护,灵活性较低的技巧CSS解决方案.

顺便说一下,如果你需要你的布局响应(例如小手机上没有列)你可以使用@media查询回退到小屏幕宽度的普通块布局 - 无论你使用<table>或任何其他display: table元素,这都适用.

3. display:inline block带有负边缘黑客.

另一种选择是使用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; DR:如果可以忽略IE9及更早版本,请使用flexbox ; 否则尝试(css)表.如果这两个选项都不适合你,那么就会出现负边距黑客攻击,但是这些可能会导致在开发过程中容易遗漏的奇怪显示问题,并且需要注意布局限制.

Answer 3

对于父母:

display: flex;

为孩子:

align-items: stretch;

你应该添加一些前缀,检查caniuse.

Answer 4

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

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

Answer 5

请设置父div overflow: hidden
然后在子div中你可以为padding-bottom设置大量.例如
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/

Answer 6

父母有高度吗？如果你这样设置父母身高.

div.parent { height: 300px };

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

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

编辑

以下是使用JavaScript的方法.

Answer 7

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.

Answer 8

我用它来评论部分：

.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 的宽度。