如何像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

使用纯css Flexbox布局的解决方案http://codepen.io/gmrash/pen/epaqva

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

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

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

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