Question

我希望右侧的div与左侧div的高度相匹配。右侧的div应始终与左侧的div相同。左侧的div自动调整其高度。两个div应始终具有相同的高度。一张图片胜过千言万语，请看下面的图片。

以下是解释我问题的图片。

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

的jsfiddle

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下面插入JavaScript并使用document.getElementById获取左div的高度，然后使用document.getElementById更改右div的高度。

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

<强>文档
http://www.w3schools.com/jsref/prop_style_height.asp

自动调整Div高度

1 个答案: