一個div到另一個

的「動力高度」的jQuery的設定高度我有兩個div。一個div到另一個

<div class="col-1"><p>Content</p></div> 
    <div class="col-2"><img src="" alt="" /></div>

在每一個裏面都有他們尊重的內容。

我想設置COL-2的高度正好爲COL-1。

我嘗試這樣使用jQuery：

$(document).ready(function() { 
     var divHeight = $('.col1').height(); 
     $('.col2').css('min-height', divHeight+'px'); 
    });

的問題是，COL-1沒有高度設置就可以了。它具有當其含量的增長，其增長動態的高度。因此，上面的代碼並沒有爲它工作。

有什麼辦法可以將col-2的最小高度設置爲等於使用jQuery的col 1的動態高度？

來源

2015-08-20 Alex Zahir

因爲HTML中的元素類與JS中的元素類不同。檢查工作[演示]（http://jsfiddle.net/tusharj/2hyyL0vt/） – Tushar

@Tushar這很好，但他指出_「問題是col-1沒有設置高度」_我提供了與他的要求在我的答案在這裏演示http://stackoverflow.com/a/32109749/4323504 –

@LuthandoLoot對。這裏是另一個[演示]（http://jsfiddle.net/tusharj/2hyyL0vt/1/） – Tushar

這正常工作對我來說，它只是你的類名字是錯誤的，類名應該是.col-1和.col-2：

$(document).ready(function() { 
    var divHeight = $('.col-1').height(); 
    $('.col-2').css('min-height', divHeight+'px'); 
});

這裏是Fiddle

編輯 - 基於評論：
你可以做到這一切，沒有使用jquery

Flexbox的（不是在IE 8 & 9支持） - 如果你申請柔性父DIV，它將使所有的孩子高度等於：
```
.row{ display: flex;} 
```

表 - 你可以給你的div的表格的佈局

.row {display: table; } 

.row div { display: table-cell;}

來源

2015-08-20 04:50:03

你可以做一個小提琴嗎？請注意，我們沒有在.col 1上指定高度。 –

@AlexZahir我添加了小提琴 –

@AlexZahir div完全採用高度，問題在於圖像，讓我看看爲什麼它會這樣做，我會盡快回復您 –

$('.col-2').css({'minHeight': divHeight+'px'});

你可以把它放在回調中。因此，當高度改變時它被執行。這樣Detecting when a div's height changes using jQuery

來源

2015-08-20 04:45:58 atinder

Where is '.tb-col2'？ – Tushar

在他的js代碼。 – atinder

但不是HTML代碼。在HTML中它是'col-1'和'col-2'。難道你不認爲這可能是真正的問題 – Tushar

添加resize事件監聽器，當COL-2調整大小，觸發功能來調整COL-2

$(document).ready(function() { 
    $('.tb-col1').resize(function(){ 
     var divHeight = $('.col-2').height(); 
     $('.col-2').css('minHeight', divHeight+'px'); 
    } 
});

來源

2015-08-20 04:48:01

首先你需要修復錯過的類名稱的 - 在你的jQuery代碼'。

如果你想獲得.col-1的高度，你可以用幾種方法來做，我會在後面討論。

在此之前，在每種情況下，您都需要編寫一個給出.col-1高度並設置.col-2的函數。

$(document).ready(function() { 

    function set_heights(){ 
     var divHeight = $('.col-1').height(); 
     $('.col-2').css('min-height', divHeight+'px'); 
    } 

});

然後，只要你需要調用函數...

一些不同的方式是：

設置間隔或定時器在一段時間內，你需要調用一次以上的功能。
```
setInterval(function(){ set_heights(); }, 100); 
```
使用.col-1的resize事件。在更改.col-1時調用以上功能。
```
$('.col-1').resize(function(){ 
    set_heights(); 
}); 
```
使用綁定

記得！對於響應式設計，即使在調整窗口大小時也需要調用上述函數！

祝你好運！

來源

2015-08-20 05:41:47

一個div到另一個

回答

相關問題