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

这是并排放置的两个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>

---

这里演示：

我想我已经完成了你想要的，没有浮动正确的div并将其设置为始终100%

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

我还对jquery代码中的大小更改进行了注释：

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

---

这是更新的代码：

好的，谢谢您的回复。我还有一个问题，我不希望我的右div位于左div之下。我希望两个div共享父div空间。简单地说，右边的div应该占据“左边”div留下的全部可用空间。而且，将来会有很多内容放在这些div中。我只是试着把一些盒子放在右边的div里。它超出了边界：我想我不明白。由于代码当前处于活动状态，因此

.right

div始终位于右侧，没有任何内容重叠。你有没有关于你想要实现什么的例子或更多信息？我已经更新了代码来展示它。它是如何正确地显示文本而不是内部div的。请看一看：我已经能够使

。内部div

通过简单地将其向左浮动来粘贴到容器上，如。也可以使用

display:inline块

。我发现使用内联块更容易，但float与旧浏览器更兼容。