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。我知道我可以使用继承，但事情是div1的高度是自动，所以它不会帮助。这是我的小提琴http://jsfiddle.net/prashusuri/E4Zgj/1/如何做到这一点？

感谢

Answer 1

通过指定我们可以实现的位置，

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

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

Answer 2

#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
不要放花车。

Answer 3

获得相同高度列的最简单方法是使用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一样高，但如果其内容高于.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; }，仍然能够扩展，那么您需要使用flexbox。 Flexbox支持尚未完全支持（IE10，Opera，Chrome。Firefox遵循旧规范，但很快就会遵循当前规范）。

{{1}}

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

Answer 4

灵活回答

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

在http://jsfiddle.net/germangonzo/E4Zgj/575/

处查看小提琴

Answer 5

我不相信你可以用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。

你也可以用操作类div3的代码替换 document.getElementById（'div3'）。style.height ，因为我的代码只添加/更改元素的样式属性。

希望这有帮助。

Answer 6

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

Answer 7

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

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

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

如何使用css基于另一个div动态更改div的高度？

7 个答案: