javascript - 如何像 Windows 资源管理器一样并排调整两个 div 的大小

Question

嗨我必须创建一个 RightCol 必须可调整大小的页面类似于 Windows 资源管理器窗口。每列的大小必须等于浏览器的高度。通过调整浏览器大小，必须调整这两列的大小。

我的代码不能正常工作。请帮帮我好吗？

/**jquery :**/

$("#LeftCol").resizable({
  maxHeight: 250,
  maxWidth: 900,
  minHeight: 150,
  minWidth: 200
});

$('#LeftCol').resize(function () {
  $('#RightCol').width($("#parent").width() - $("#LeftCol").width());
});
$(window).resize(function () {
  $('#RightCol').width($("#parent").width() - $("#LeftCol").width());
  $('#LeftCol').height($("#parent").height());
});

<link href="https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css" rel="stylesheet" />
#parent {
  position: relative;
  min-height: 300px;
  margin: 0;
  padding: 0;
  width: 100%;
}

#LeftCol {
  position: relative;
  float: right;
  min-height: 400px;
  width: 65%;
  background-color: #A2A;
  overflow:auto;
}

#RightCol {
  position: relative;
  float: right;
  min-height: 400px;
  width: 35%;
  background-color: #BBB;
  overflow:auto;
  max-height:300px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<div id="parent">
  <div id="RightCol"></div>
  <div id="LeftCol"></div>
</div>

Answer 1

我会将一个设置为可调整大小，将另一个设置为 flexbox。

https://codepen.io/anon/pen/YjJBZm

我采用了其中一个已经给出的答案并在这支笔中进行了尝试。进行了一些调整。

HTML

#parent {
  display: flex;
  border: 1px solid #000;
  height: 75vh;
  width: 100%;
}

#LeftCol {
  flex-grow: 1;
  border: 1px solid red;
  resize: horizontal;
  overflow: auto;
}

#RightCol {
  flex-grow: 3;
  border: 1px solid red;
}

<div id="parent">
  <div id="LeftCol">LeftCol</div>
  <div id="RightCol">RightCol</div>
</div>