Question

我有一组像这样的div：

<div id="body_container">
     <div id="top_body">
     </div>
     <div id="bottom_body">
     </div>
</div>

我也有这个功能：

$(function() {
   $("#top_body").resizable({handles: "s",
   alsoResize: "#bottom_body"});
});

调整大小有效，但在开始调整大小操作后立即为#bottom_body分配一个固定宽度（等于调整大小操作开始时的宽度）。通过css，#top_body和#bottom_body的宽度均为100％。我希望它保持这种状态。

有没有办法阻止宽度分配？我希望允许宽度适应窗口调整大小，但是，对于我当前的问题，宽度分配修复了底部div（但不是最重要的一个），打破我的界面。

理想情况下，我希望解决方案不需要使用JS处理程序，每当我使用可调整大小的句柄时，都要将宽度强制回100％。

Answer 1

$(window).on('resize', function() {
    $('#bottom_body').css({width: '100%'});
});

这仅在更改窗口宽度/高度时运行，而不是在更改/调整两个div的高度时运行，因为它不需要运行。