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

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/该怎么做？

感谢

来源

2013-01-10 Prashanth Suriyanarayanan

这很复杂，只使用CSS。有各种各样的方法，你可以查看其中的一些[here]（http://css-tricks.com/fluid-width-equal-height-columns/）。如果你可以使用javascript（或理想的jQuery），那么更容易 – scumah

@scumah检查我的答案。 –

所以你想要等高柱？ – cimmanon

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

容器必须有显示：表
内部容器盒要：显示：表细胞
不要把浮动。

来源

2013-10-07 09:52:25 cosacu

通过指定的位置，我们可以做到这一点，

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

但它不可能达到这个使用浮动。

来源

2013-01-10 12:30:28

尽量保持代码的一致性：您已将上述'color'描述为'grey'，然后您使用符号来表示颜色。 – user2567857

虽然我的工作。 @cosacu提供的答案是更好的解决方案。 –

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

您也可以替换的document.getElementById（“div3”的）。style.height代码为操纵类DIV3，因为我的代码只添加元素的/更改样式属性。

希望这会有所帮助。

来源

2013-01-10 12:39:59 WrongASP

不，我们可以用CSS来做到这一点。只是看看我的答案。 –

@Prashanth - 虽然它可以在固定高度或CSS3上进行可能的粗略支持（显示：表格，弹性框），但并不是当高度是动态的，而且您使用的是浮点数（并且在所有情况下，您可能都需要一些数量的JS支持，使所有相关浏览器都可以动态和/或支持）。 [这就是为什么人造色谱柱已经存在近十年了。]（http://www.alistapart.com/articles/fauxcolumns/） – Shauna

@Shauna粗略支持？ IE8 +支持'display：table'，以及过去5年内发布的所有其他浏览器版本。 – cimmanon

得到高度相等列，没有丑陋的副作用，绝对定位一起走最简单的方法，就是使用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/

来源

2013-01-10 13:30:12 cimmanon

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

来源

2013-11-22 11:10:18

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

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

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

来源

2015-01-12 15:24:15

灵活答案

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

来源

2017-10-13 23:02:56

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

回答

相关问题