如何让一个div的高度取决于另一个div的高度？

嗯，我有这样的简单的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的动态变化，其高度可以改变依赖的内容。我想要的是使#2与#1的高度相同。我明白我可以使用JavaScript来达到这个目的，但是我建议必须有一些不那么棘手的方法来使这些div的高度相等，只用CSS和/或更改div定位一些方法。

来源

2012-12-15 Dmytro

不，没有语义。你想要的是虚拟列，这里有一堆技术：http://css-tricks.com/fluid-width-equal-height-columns/ –

我不会推荐它，除非你的数据是表格，但有你考虑过使用表格？ – Wex

为了扩大我的评论，你不能在语义上做到这一点。你必须使用一个小技巧来伪装100％的身高。这就是所谓的虚拟列，你可以阅读更多here。

在你的情况，我们可以通过添加一些背景div的假货：

<div class="background bg1"></div> 
<div class="background bg2"></div>

然后改变你的CSS像这样：

#wrapper { 
    border: 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。

来源

2012-12-15 19:38:28

而且flexbox在某一天被认为是未来。 http://dev.w3.org/csswg/css3-flexbox/ –

非常感谢......奇怪的是，这样简单的事情必须做得如此棘手...... – Dmytro

@JaredFarrish，我没有看到了。看起来非常有希望，当我们决定杀死基于表格的设计时，应该已经是规范的一部分了：p –

jQuery Way：使用.height（）返回Div1的高度，然后简单地使用.css（）将Div2设置为Div1的高度。当一个div改变时，你可以使用resize事件来触发一个会改变div2高度的函数。

CSS方式：Christian Varga的答案似乎很完美。

来源

2012-12-15 19:26:47

问题指定_only css_虽然：p –

添加一种方法通过CSS来做到我的答案。 –

哈哈，但'高度：继承'不会做你认为它的作用。 –

如何让一个div的高度取决于另一个div的高度？

回答

相关问题