javascript - 两个 div 并排占据整个容器区域并处理调整大小事件

Question

这是并排放置的两个 div 的代码，这样在最小化第一个 div 时，第二个 div 应该自动占据剩余空间。当第一个 div 回到原来的位置时，第二个 div 应该自动缩小它的大小。

这里的另一个限制是，div 的大小不是由像素固定的，它们实际上必须以百分比表示。任何人都可以在这方面提供帮助吗？

<div id="parent" class="parent">
<div class="left"><button class="collapse-expand"></button></div>
 <div class="right">
    <!--<button class="collapse-expand"></button>-->
    </div>

此处演示:http://jsfiddle.net/rams10786/wrv8r91r/

Answer 1

我认为通过不 float 正确的 div 并将其设置为始终 100%，我已经完成了您想要的。

    .right{
        height: 100%;
        width: 100%;
        background-color: #67b168;
    }

我还评论了 jquery 代码中的大小变化:

    if($('.left').css("width")=='37px'){
         $('.left').animate({width:"20%"});
         // $('.right').animate({width: "80%"});
    }

这是更新后的代码:http://jsfiddle.net/jfpamqb7/1/