如何使用CSS根据另一个div动态更改div的高度？

Question

这是我的代码。

HTML:

<div class="div1">
  <div class="div2">
    Div2 starts <br /><br /><br /><br /><br /><br /><br /> Div2 ends
  </div>
  <div class="div3">
    Div3
  </div>
</div> 

CSS：

.div1 {
  width: 300px;
  height: auto;
  background-color: grey;
  border: 1px solid;
  overflow: auto;
}

.div2 {
  width: 150px;
  height: auto;
  background-color: #F4A460;
  float: left;
}

.div3 {
  width: 150px;
  height: auto;
  background-color: #FFFFE0;
  float: right;
}

我想要动态增加div3的高度。

例如，如果div1的高度为500px，那么div3的高度应该也是500px。我知道可以使用inherit，但是因为div1的高度是auto，所以它不起作用。

这是我的示例：http://jsfiddle.net/prashusuri/E4Zgj/1/

如何实现？

- JSAddict

---

这在纯 CSS 中比较复杂。有多种方法，你可以在这里检查一些（http://css-tricks.com/fluid-width-equal-height-columns/）。如果你可以使用 JavaScript（最好是 jQuery），那就更容易了。 - scumah

所以你想要等高的列？ - cimmanon

@cimmanin 是的。但是你不应该固定div1的高度。它应该是自动的。 - JSAddict

Answer 1

#container-of-boxes {
    display: table;
    width: 1158px;
}
#box-1 {
    width: 578px;
}
#box-2 {
    width: 386px;
}
#box-3 {
    width: 194px;
}
#box-1, #box-2, #box-3 {
    min-height: 210px;
    padding-bottom: 20px;
    display: table-cell;
    height: auto;
    overflow: hidden;
}

• 容器必须具有 display:table
• 容器内的框必须是: display:table-cell
• 不要使用浮动。

- cosacu

Answer 2

通过指定位置，我们可以实现这一点。

.div1 {
  width:300px;
  height: auto;
  background-color: grey;  
  border:1px solid;
  position:relative;
  overflow:auto;
}
.div2 {
  width:150px;
  height:auto;
  background-color: #F4A460;  
  float:left;
}
.div3 {
  width:150px;
  height:100%;
  position:absolute;
  right:0px;
  background-color: #FFFFE0;  
  float:right;
}

但是使用浮动无法实现这一点。

- JSAddict

---

尽量保持代码的一致性：您已将“颜色”描述为“灰色”，然后使用符号表示颜色。 - user2567857

虽然我的代码可以工作，但@cosacu提供的答案是更好的解决方案。 - JSAddict

Answer 3

在这段代码中，左侧面板的高度将会动态地调整为右侧面板的高度...

function resizeDiv() {
var rh=$('.pright').height()+'px';
$('.pleft').css('height',rh);
}

你可以在这里尝试一下 http://jsfiddle.net/SriharshaCR/7q585k1x/9/embedded/result/

- Harsha

Answer 4

我不相信你可以用CSS完成这个任务。最初JavaScript就是为此而设计的。 试试这个：

<div class="div1" id="div1">
  <div class="div2">
    Div2 starts <br /><br /><br /><br /><br /><br /><br />
    Div2 ends
  </div>
  <div class="div3" id="div3">
    Div3
  </div>
</div>

以及 JavaScript 函数：

function adjustHeight() {
    document.getElementById('div3').style.height = document.defaultView.getComputedStyle(document.getElementById('div1'), "").getPropertyValue("height");
}

在div1（或整个页面）加载完成后调用JavaScript。

您还可以使用操作class div3的代码替换document.getElementById('div3').style.height，因为我的代码仅添加/更改元素的样式属性。

希望这能帮到您。

- WrongASP

---

@Prashanth - 尽管使用固定高度或具有潜在不稳定支持的CSS3（display：table，flex-box）可以实现，但当高度是动态的并且您正在使用浮动时就不行了（在所有情况下，您可能需要一些JS支持来使所有内容都是动态的和/或在所有相关浏览器上得到支持）。这就是为什么“假列”已经存在将近十年的原因。 (http://www.alistapart.com/articles/fauxcolumns/) - Shauna

@Shauna 不可靠的支持？IE8+对于display: table具有稳定的支持，以及在过去5年内发布的每个其他浏览器版本。 - cimmanon

@cimmanon - 好的，说得对（评论中的字符限制太烦人了），但这仍然需要支持IE7，而我们许多人仍然需要支持它。根据所需的支持级别，这仍然需要JS。 - Shauna

抱歉，我只是根据你上一句话中对它是否适用于浮点数的怀疑而发言。 - WrongASP

Answer 5

最简单的方式来获取等高的列，而不会带来绝对定位的丑陋副作用，就是使用display: table属性：

.div1 {
  width:300px;
  height: auto;
  background-color: grey;  
  border:1px solid;
  display: table;
}

.div2, .div3 {
  display: table-cell;
}
.div2 {
  width:150px;
  height:auto;
  background-color: #F4A460;  

}
.div3 {
  width:150px;
  height:auto;
  background-color: #FFFFE0;  
}

http://jsfiddle.net/E4Zgj/21/

---

现在，如果您的目标是使.div2只有足以容纳其内容的高度，而.div3至少与.div2一样高，但仍能够扩展，如果其内容使其比.div2更高，则需要使用flexbox。Flexbox支持还不太完善（IE10，Opera，Chrome。Firefox遵循旧规范，但很快将遵循当前规范）。

.div1 {
  width:300px;
  height: auto;
  background-color: grey;  
  border:1px solid;
  display: flex;
  align-items: flex-start;
}

.div2 {
  width:150px;
  background-color: #F4A460;
}

.div3 {
  width:150px;
  background-color: #FFFFE0;
  align-self: stretch;
}

http://jsfiddle.net/E4Zgj/22/

- cimmanon

Answer 6

灵活的答案。

.div1 {
   width:300px;
   background-color: grey;  
   border:1px solid;
   overflow:auto;
   display: flex;
}
.div2 {
   width:150px;
   background-color: #F4A460;
 }
.div3 {
    width:150px;
    background-color: #FFFFE0;  
 }

请查看这个 jsfiddle http://jsfiddle.net/germangonzo/E4Zgj/575/。

- German Gonzalez

Answer 7

<!DOCTYPE html>
<html lang="en">
<head>
<!-- Here is the Pakka codes for making the height of a division equal to another dynamically - M C Jain, Chartered Accountant -->

<script language="javascript">
function make_equal_heights()
{


if ((document.getElementById('div_A').offsetHeight) > (document.getElementById('div_B').offsetHeight) ) 
{ 
document.getElementById('div_B').style.height = (document.getElementById('div_A').offsetHeight) + "px";
} 
else 
{ 
document.getElementById('div_A').style.height = (document.getElementById('div_B').offsetHeight) + "px"
}


}
</script>

</head>

<body style="margin:50px;"  onload="make_equal_heights()"> 

<div  id="div_A"  style="height:200px; width:150px; margin-top:22px;
                        background-color:lightblue;float:left;">DIVISION A</div><br>

<div  id="div_B"  style="height:150px; width:150px; margin-left:12px;
                        background-color: blue; float:left; ">DIVISION B</div>

</body>
</html>

- M C Jain