자동 조정 div 높이

Question

오른쪽에있는 div가 왼쪽에있는 div의 높이와 일치하도록하고 싶습니다. 오른쪽의 div는 항상 왼쪽의 div와 같은 높이 여야합니다. 왼쪽의 div가 자동으로 높이를 조정합니다. 두 div는 항상 같은 높이를 가져야합니다. 그림은 천 단어의 가치가 있으므로 아래 그림을 참조하십시오.

다음은 내 문제를 설명하는 이미지입니다.

http://i44.tinypic.com/24pcpwj.jpg

JSFIDDLE

http://jsfiddle.net/zFqNH/

HTML

<div style="width:1053px;"> 
<section id="inside" style="overflow: hidden; width:310px; float:right; border-left:0;"> 
<ul> 
<p class="title">Funny</p> 

<li class="list"> 
    <img src="http://cdn.dashburst.com/wp-content/uploads/2013/01/Grumpy-Cat.jpg"  width="100" height="67" style="float:left;padding-right:15px;" /></a> 
    <h3 style="font-size:20px;">Grumpy Cat</h3>   
</li> 
</ul> 
</section> 

<section id="inside"> 
<h2 class="subheading">Grumpy Cat<br/><p style="font-size:14px; margin-top:0px; font-weight:normal;"></p></h2><h2 style="border-bottom: 1px solid #dddddd; padding-top:10px;"></h2>          
<p class="section"></p>        

<img src="http://cdn.dashburst.com/wp-content/uploads/2013/01/Grumpy-Cat.jpg" border="0" style="display:block; margin: 0 auto;" height="396" width="700"> 
<br/>          
    <img src="http://cdn.dashburst.com/wp-content/uploads/2013/01/Grumpy-Cat.jpg" border="0" style="display:block; margin: 0 auto;" height="396" width="700"> 
<br/> 
     <img src="http://cdn.dashburst.com/wp-content/uploads/2013/01/Grumpy-Cat.jpg" border="0" style="display:block; margin: 0 auto;" height="396" width="700"> 
<br/> 

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

CSS

#inside { 
width:700px; 
border-right: 1px solid #dddddd; 
border-left: 1px solid #dddddd; 
min-height: 600px; 
overflow: hidden; 
padding-bottom:15px;  
    } 
    .title{ 
width:300px; 
padding-top:3px; 
padding-bottom:7px; 
color:#fff; 
height:20px;  
margin-top:125px; 
background:#2c2c2c;   
font-size: 18px; 
    } 
    .section{ 
padding-left:30px; 
padding-bottom:15px; 
margin-bottom: 1px; 
font-size: 28px; 
color: #657B83; 
    } 
    .subheading { 
background:#fff;  
font-size:50px;   
height:100px; 
position: relative; 
    } 

    .bottom { 
border-top: 1px solid #dddddd;  
border-right: 1px solid #dddddd;  
padding-top: 20px; 
text-align: center; 
padding-bottom: 10px; 
width:1053px;  
position:relative; 
margin: 0 auto; 
font-size:15px; 
color: #fff;  
    } 
    .list{ 
width:300px; 
border-bottom: 1px solid #dddddd; 
padding-bottom:10px; 
display: inline-block; 
margin-top:20px; 
    } 

Answer 1

삽입 자바 스크립트를 두 div의 아래 왼쪽 DIV의 높이를 얻을 수 document.getElementById를을 사용하여, 다음 오른쪽 DIV의 높이를 변경하는 document.getElementById를 사용합니다.

<script> 
    var height = document.getElementById('div1').style.height; 
    document.getElementById('div2').style.height = height; 
</script> 

문서 :
http://www.w3schools.com/jsref/prop_style_height.asp