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

时间：2011-01-26 12:32:22

标签： html css layout

我的页面结构为：

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

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

现在，child-left DIV会有更多内容，因此根据孩子DIV，parent DIV的身高会增加。

但问题是child-right身高没有增加。如何使其高度等于它的父母？

13 个答案:

答案 0 :(得分：416)

对于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示例here查找更详细的结果，以及有关相等高度列here的更多信息。

答案 1 :(得分：183)

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

  1. display: flex：到目前为止最简单的＆amp;最佳解决方案并且非常灵活 - 但IE9及更早版本不支持。
  2. table或display: table：非常简单，非常兼容（几乎每个浏览器都有），非常灵活。
  3. display: inline-block; width:50%带有负边距黑客：非常简单，但是柱底边框有点棘手。

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

    一个简单的＆amp;非常兼容的方法是使用table - 我建议您首先尝试使用旧的IE支持。你在处理专栏; divs + floats根本不是最好的方法（更不用说多个级别的嵌套div只是为了破解css限制而不仅仅是“语义”而不仅仅是使用一个简单的表）。如果您不想使用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强大得多。您可以添加几乎任意数量的列;如果你愿意，你可以让他们自动缩放;并保持与古代浏览器的兼容性。与浮点解决方案要求不同，您也不需要事先知道 哪个列最长;身高很好。

    KISS：除非您特别需要，否则不要使用浮动黑客。如果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）表。如果这两个选项都不适合你，那么就会出现负边距黑客攻击，但是这些可能导致在开发过程中容易遗漏的奇怪显示问题，并且需要注意布局限制。

答案 2 :(得分：19)

对于父母：

display: flex;

对于孩子们：

align-items: stretch;

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

答案 3 :(得分：18)

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

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

答案 4 :(得分：11)

请将父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/

答案 5 :(得分：8)

父母的身高吗？如果你这样设置父母身高。

div.parent { height: 300px };

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

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

修改

Here is how you would do it using JavaScript.

答案 6 :(得分：5)

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。

答案 7 :(得分：4)

我最近在我的网站上使用jQuery完成了这项工作。代码计算最高div的高度，并将其他div设置为相同的高度。这是技术：

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

我不相信height:100%会起作用，所以如果你没有明确知道div高度，我认为没有纯CSS解决方案。

答案 8 :(得分：4)

我用它来评论部分：

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

你可以将孩子向右浮动，但在这种情况下，我精确地计算了每个div的宽度。

答案 9 :(得分：3)

如果您了解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中的身高等级而不管边界

答案 10 :(得分：0)

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

我使用内联样式来提供想法。

答案 11 :(得分：0)

我看到接受的答案使用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
}

答案 12 :(得分：-2)

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

<div class="parent">
    <div class="assert-height invisible">
        <!-- content -->
    </div>
    <div class="shown">
        <!-- content -->
    </div>
</div>
相关问题
最新问题