如何让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％到“主”容器？

回答

相关问题