如何讓一個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的高度？

回答

相關問題