如何讓div的高度保持100％到「主」容器？

-1

<div id="main"> 
    <div id="left"> 
     news feed goes here 
    </div> 
    <div id="right"> 
     another news feed ges here 
    </div> 
    <div style="clear:both;"></div> 
</div>

假設我有一個容器「主」，我有2列。兩欄均爲float:left;。如何讓div的高度保持100％到「主」容器？

當人們在左邊的新聞提要列上點擊「加載更多」時，當然會因爲我們加載更多內容而擴大該列的高度。但我希望右欄也隨之擴大。換句話說，我希望「右」列始終是主體的100％高度。

我該怎麼做？我是否將「右」欄的高度設置爲100％？或者是什麼？

來源

2011-12-19 user847495

有很多種方法可以做到這一點，問題是大約與css一樣古老。看看http://stackoverflow.com/search?q=equal+height+column的一些回報。 – ScottS 2011-12-19 01:22:12

重複或不..這裏是一個小提琴給你出個主意，你怎麼可以這樣

http://jsfiddle.net/pixelass/uAur5/

HTML

<span class="more">load more</span> 
<div class="main"> 
    <div class="left">this is a left box</div> 
    <div class="full">this is the right box</div> 

</div>

CSS

.left { 
    background:#666; 
    margin:10px; 
    width:130px; 
    height:80px; 
    float:left; 
    padding:10px; 
} 
.full { 
    width:130px; 
    background:#eee; 
    float:right; 
    height:80px; 
    padding:10px; 
    margin:10px; 
} 
.main { 
    width:500px; 
    background:#000; 
    height:140px; 
    margin:20px 10px; 
} 
.more{ 
border:#000 1px solid; 
    padding:3px; 
    background:#222; 
    color:#aaa; 
    margin:20px; 
    cursor:pointer; 
}

Ĵ查詢

$('.more').click(function(){ 
    $('.main').append('<div class="left">this is a left box</div>'); 
    $('.full').css('height', '+=120px'); 
    $('.main').css('height', '+=120px'); 
});

來源

2011-12-19 02:12:57 pixelass

如果你的意思是你想改變div的高度，那麼;

 
document.getElementById("yourRightDivsId").style.height = yourNewHeight;

來源

2011-12-19 01:23:46

如何讓div的高度保持100％到「主」容器？

回答

相關問題