自動調整div高度

我想要右側的div來匹配左側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; 
    }

來源

2013-11-01 John

插入JavaScript下面的兩個div和使用的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

來源

2013-11-01 09:35:56 keenydev

它不是做得比較工作。我試過了，它把所有的東西搞砸了。有沒有解決方案來使用CSS？ – John

只用CSS就無法做到這一點，你需要使用JavaScript或jQuery。你的div id需要彼此獨一無二。請看看爲這個類似的問題給出的jQuery答案http://stackoverflow.com/questions/3275850/set-a-div-height-equal-with-of-another-div – keenydev

你能告訴我這是怎麼回事網站做到了嗎？本網站的側邊欄一直延伸至下。 http://www.theverge.com/2013/11/1/5053878/android-4-4-kitkat-and-google-quest-for-the-next-billion – John

自動調整div高度

回答

相關問題