Пытается получить div, чтобы всегда соответствовать высоте div, высота которого постоянно увеличивается и уменьшается

Question

У меня есть div, который содержит список элементов. Пользователь может добавлять/удалять элементы из списка, поэтому div постоянно изменяет высоту, чтобы компенсировать изменение размера списка.

У меня есть другой div справа, который должен предоставить детали о предметах слева. Как я могу заставить div справа постоянно вертикально выравниваться с левым div и изменять высоту так, чтобы он равнялся высоте, на которой находится текущий div, поскольку элементы добавляются и удаляются из списка левого div?

Я пытался реализовать таблицы для этого решения, но я считаю, что он не работает с моим кодом, так что вместо этого я попытался это JS код ...

Смотрите эту скрипку: http://jsfiddle.net/r6sc27ck/

код может достичь того, чего я хочу, но фон на левом DIV не отображается, так что что-то пойдет не так ...

HTML

<div id="Div2">Hello2</div> 
<br> 
<div id="Div1">Hello1</div> 

CS S

#Div1{ 
    background-color:blue; 
} 

#Div2{ 
    background-color:red; 
} 

JS

$(document).ready(function(){  
    document.onchange=setDivHeight(); 

function setDivHeight(){ 
    var x=Number(document.getElementById('Div1').style.height) 
    document.getElementById('Div2').style.height=x; 
} 

}); 



setInterval(function() { 
    $('#Div1').eq(0).append('<p>appended content</p>') 
}, 1000) 

http://jsfiddle.net/r6sc27ck/

Answer 1

Вместо использования document.onchange, вы должны вызвать setDivHeight() в конце процесс, который добавляет контент в div. Я также изменил стиль и содержимое setDivHeight().

http://jsfiddle.net/r6sc27ck/4/

var prevHeight; 
$(document).ready(function(){  
     prevHeight = $('#Div1').height(); 
}); 
function setDivHeight(){ 
    var curHeight = $('#Div1').height();    
    if (prevHeight !== curHeight) { 
     prevHeight = curHeight; 
     setDivHeight(); 
    }    
    $('#Div2').height($('#Div1').height()); 

} 


setInterval(function() { 
    $('#Div1').eq(0).append('<p>appended content</p>'); 
    setDivHeight(); 
}, 1000) 

Answer 2

Если у вас есть 2 дивы рядом с Афоризм вы можете Allign их, устанавливая вертикально-Allign:

div{ 
    vertical-align: top; 
} 

JSFiddle

Answer 3

Вы можете установить два divs в display:table-cell и содержащий div до display:table. Вот обновленная скрипка http://jsfiddle.net/r6sc27ck/1/

Также есть много способов добиться этого, посмотрите здесь. https://css-tricks.com/fluid-width-equal-height-columns/

Answer 4

Попробуйте

Css

#Div1 { 
    display:inline-block; 
    position:relative; 
    background-color:blue; 
    width:35%; 
} 
#Div2 { 
    display:inline-block; 
    position:relative; 
    background-color:red; 
    width:35%; 
} 

JS

$(document).ready(function() { 
    setInterval(function() { 
     $("#Div1").eq(0).append("<p>appended content</p>"); 
     $("#Div2").eq(0).append("<p>&nbsp;</p>"); 
    }, 1000) 
}); 

jsfiddle http://jsfiddle.net/vnt83hz7/4/