HTML – 如何使一个div的高度取决于另一个div的高度？

概述好吧,我有这样简单的div结构： <div id="wrapper"> <div id="1" class="block"> 1 </div> <div id="2" class="block"> 2 </div></div> JS Fiddle #1的内容可以通过javascript动态更改,其高度可以根据内容进行更改.我 好吧,我有这样简单的div结构：

<div ID="wrapper">    <div ID="1" >    1                </div>    <div ID="2" >    2    </div></div>

JS Fiddle

#1的内容可以通过JavaScript动态更改,其高度可以根据内容进行更改.我想要的是让#2与#1的高度相同.我知道我可以使用JavaScript来达到这个目的但是我建议必须有一些不那么棘手的方法来使这些div的高度仅使用CSS和/或改变divs的位置如何.

解决方法 要扩展我的评论,你不能在语义上做到这一点.你必须使用一个小技巧来伪造100％的高度.它被称为人造柱,您可以阅读更多 here.

在你的情况下,我们可以通过添加一些背景div来伪造它：

<div ></div><div ></div>

然后改变你的CSS：

#wrapper {    @R_301_5559@: 1px solID black;    position: relative;}#wrapper:after {    display: block;    content: " ";    height: 0;    clear: both;}.block {    position: relative;    float: left;    vertical-align: top;    wIDth: 200px;    text-align: left;    min-height: 200px;    padding-left: 20px;    z-index: 2;}.background {    position: absolute;    top: 0;    bottom: 0;    wIDth: 200px;    z-index: 1;}.bg1 {    background-color: #eee;}.bg2 {    left: 200px;    background-color: #aaa;}​

这是一个工作jsFiddle.

总结

以上是内存溢出为你收集整理的HTML – 如何使一个div的高度取决于另一个div的高度？全部内容，希望文章能够帮你解决HTML – 如何使一个div的高度取决于另一个div的高度？所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。