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

osh3o9ms 于 2022-12-27 发布在其他

关注(0)|答案(7)|浏览(265)

这是我的代码。
超文本：

<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的高度是auto，所以它没有帮助。
这是我的小提琴http://jsfiddle.net/prashusuri/E4Zgj/1/
如何做到这一点？

css

来源：https://stackoverflow.com/questions/14257593/how-to-change-the-height-of-a-div-dynamically-based-on-another-div-using-css

7条答案

按热度按时间

bz4sfanl1#

#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
容器内的 Package 盒必须：显示：表格单元格
不要放浮子。

赞(0）回复(0）举报 2022-12-27

lb3vh1jj2#

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

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

但是使用浮动不可能实现这一点。

赞(0）回复(0）举报 2022-12-27

j0pj023g3#

获得等高列的最简单方法是使用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。（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/

赞(0）回复(0）举报 2022-12-27

bt1cpqcv4#

灵活回答

.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/处的小提琴

赞(0）回复(0）举报 2022-12-27

ssgvzors5#

我不相信你能用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");
}

在加载div 1（或整个页面）之后调用javascript。
您还可以用代码操作类div 3替换 document.getElementById（'div 3'）.style.height，因为我的代码只添加/更改元素的style属性。
希望这个有用。

赞(0）回复(0）举报 2022-12-27

pprl5pva6#

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

赞(0）回复(0）举报 2022-12-27

mzillmmw7#

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

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

您可以在此处尝试http://jsfiddle.net/SriharshaCR/7q585k1x/9/embedded/result/

赞(0）回复(0）举报 2022-12-27

我来回答

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

7条答案

相关问题

热门标签

最新问答