Question

<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>

假设我有一个容器“main”，我有2列。两列都是float:left;。

当人们点击左侧新闻Feed列中的“加载更多”时，当然会扩展该列的高度，因为我们会加载更多内容。但是我希望右列也能随之展开。换句话说，我希望“正确”列始终为100％的主要高度。

我该怎么做？我将“右”栏的高度设为100％？或者什么？

Answer 1

如果你的意思是想改变div的高度，那么;

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

Answer 2

重复与否......这里有一个小提示，让你知道如何做到这一点

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;
}

的jQuery

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

如何使div的高度保持100％到“主”容器？

2 个答案: