如何像Windows资源管理器

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="http://kanda.soon.it/Content/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="http://kanda.soon.it/Files/jquery-ui.js"></script>
<div id="parent">
  <div id="RightCol"></div>
  <div id="LeftCol"></div>
</div>

Answer 1

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

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

我拿了一个已经给过的answears，并在这支笔上试用了。进行了一些调整。

HTML

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

CSS

#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;
}

Answer 2

使用纯css Flexbox Layout http://codepen.io/gmrash/pen/epaqva

的解决方案

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

#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;
}