Question

我正在使用angular2-draggable模块垂直调整div的大小。您可以在“可调整大小的演示”区域中看到此演示：https://xieziyu.github.io/angular2-draggable/#/resizable/default。我想要的是，当调整顶部div的大小时，下方div的高度会减小或增大，而不是向下移动。也就是说，整个页面的高度永远不变，只有两个div高度可以相互调整。有谁知道该怎么做？

Answer 1

您可以使用一些简单的CSS轻松实现此目的。创建一个覆盖整个页面的父容器，应用具有列方向的弹性框样式，并使底部元素自动调整大小以适合可用空间。例如

<div class="container" style="height:100%; display:flex; flex-direction:column">
    <div ngResizable>
      ...
    </div>
    <div class="bottom-div style="flex:1">
      ...
    </div>
  </div>
</div>

Answer 2

如果您还没有jQuery，我强烈建议您将其安装到您的角度（通过将Google or Microsoft CDN放置在index.html中，或仅将downloading放置）。

然后，您可以使用$('.div1').height()获取第一个div的高度，并可以使用$('.div2').height(value)设置另一个div的高度。

在您的情况下，还有另一个父div，它同时包含.div1和.div2

1）将ID标识符添加到保存div.container-fluid和div.resizable-widget的{{1}}

2）在调整可调整大小的窗口小部件大小时调用该事件，请调用以下命令（使用新ID代替类）：

div.col

如何根据另一个可调整大小的div自动调整div的高度

2 个答案: