最好的方法来做一个分割窗格在HTML中
有谁知道一个很好的技术，在HTML中创build一个可resize的分割窗格？
可以使用css / jquery / javascript来完成，还是有人知道他们使用的好的JavaScript库？
（一个分割窗格的例子是Internet Explorer中的collections夹，您可能已经停靠在主浏览器窗口的左侧）
当然，已经有很多的实现。 下面是一个： http ： //layout.jquery-dev.net/在这里展示： http : //layout.jquery-dev.net/demos/simple.html
我想要一个香草，轻量级（jQuery UI布局权重在185kb），没有依赖选项（所有现有的库需要jQuery），所以我写了Split.js 。
它的权重小于2kb，不需要任何特殊的标记。 它支持旧的浏览器回到IE9（或带有polyfills的IE8）。 对于现代浏览器，您可以将其与Flexbox和网格布局结合使用。
这里是我的轻量级香草js方法，使用flexbox：
http://codepen.io/lingtalfi/pen/zoNeJp
testing成功在Chrome 54，Firefox 50，Safari 10，不知道其他浏览器。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.rawgit.com/lingtalfi/simpledrag/master/simpledrag.js"></script> <style type="text/css"> html, body { height: 100%; } .panes-container { display: flex; width: 100%; overflow: hidden; } .left-pane { width: 18%; background: #ccc; } .panes-separator { width: 2%; background: red; position: relative; cursor: col-resize; } .right-pane { flex: auto; background: #eee; } .panes-container, .panes-separator, .left-pane, .right-pane { margin: 0; padding: 0; height: 100%; } </style> </head> <body> <div class="panes-container"> <div class="left-pane" id="left-pane"> <p>I'm the left pane</p> <ul> <li><a href="#">Item 1</a></li> <li><a href="#">Item 2</a></li> <li><a href="#">Item 3</a></li> </ul> </div> <div class="panes-separator" id="panes-separator"></div> <div class="right-pane" id="right-pane"> <p>And I'm the right pane</p> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. A accusantium at cum cupiditate dolorum, eius eum eveniet facilis illum maiores molestiae necessitatibus optio possimus sequi sunt, vel voluptate. Asperiores, voluptate! </p> </div> </div> <script> var leftPane = document.getElementById('left-pane'); var rightPane = document.getElementById('right-pane'); var paneSep = document.getElementById('panes-separator'); // The script below constrains the target to move horizontally between a left and a right virtual boundaries. // - the left limit is positioned at 10% of the screen width // - the right limit is positioned at 90% of the screen width var leftLimit = 10; var rightLimit = 90; paneSep.sdrag(function (el, pageX, startX, pageY, startY, fix) { fix.skipX = true; if (pageX < window.innerWidth * leftLimit / 100) { pageX = window.innerWidth * leftLimit / 100; fix.pageX = pageX; } if (pageX > window.innerWidth * rightLimit / 100) { pageX = window.innerWidth * rightLimit / 100; fix.pageX = pageX; } var cur = pageX / window.innerWidth * 100; if (cur < 0) { cur = 0; } if (cur > window.innerWidth) { cur = window.innerWidth; } var right = (100-cur-2); leftPane.style.width = cur + '%'; rightPane.style.width = right + '%'; }, null, 'horizontal'); </script> </body> </html> 这个html代码取决于simpledrag vanilla js轻量级库（不到60行代码）。
在过去，你会使用框架来实现这一点。 这种方法不好，有几个原因。 请参阅Reece对帧为什么不好的回应。 另见雅各布·尼尔森（ Jakob Nielson）的“ 为什么帧”（大部分时间）
一个更新的方法是使用内联框架。 这也有其优点和缺点： iframe是否被认为是“坏习惯”？
更好的方法是使用固定的定位 。 通过将导航内容（例如您的示例中的collections夹链接）放置在块元素（如div ）中，然后应用position:fixed到该元素，并设置左侧，顶部和底部属性，如下所示：
#myNav { position:fixed; left:0px; top:0px; bottom:0px; width:200px; }
…您将实现页面左侧的垂直列，用户滚动页面时不会移动。
页面上的其余内容不会“感觉”这个nav元素的存在，所以它必须考虑到它所占用的200px的空间。 您可以通过将剩下的内容放在另一个div中并设置margin-left:200px; 。
您可以使用绝对定位。 例如，这个CSS将在页面的左侧停靠一个2em-bar：
body { padding-left: 2.5em; } body > #bar { position:fixed; top:0; left:0; width: 2em; height: 100%; border-right: 2px solid #55F; background: #ddd; }
（ 在jsfiddle.net上演示 ）
你有没有尝试Dave Methwin库， http: //methvin.com/splitter/
一个完全不同的方法是把东西放在网格中，比如ui-grid或者Kendo的网格，并且可以调整列的大小。 缺点是用户将无法调整行的大小，尽pipe行的大小可以通过编程来设置。
我发现工作分割器http://www.dreamchain.com/split-pane/与;jquery v1.9 。 注意我必须添加下面的CSS代码才能使用固定的bootstrap导航栏。
fixed-left { position: absolute !important; /* to override relative */ height: auto !important; top: 55px; /* fixed navbar height */ bottom: 0px; }
你可以使用JqueryUI而不用另一个JS库。 只需在.resizable resize事件中添加一个函数来调整其他div的宽度即可。
$("#left_pane").resizable({ handles: 'e', // 'East' side of div draggable resize: function() { $("#right_pane").outerWidth( $("#container").innerWidth() - $("#left_pane").outerWidth() ); } });
这里是完整的JS小提琴 。
一个好的图书馆是Shield UI–你可以看看他们灵活的Splitter小部件和框架提供的其他强大组件。
嗯，我碰到CSS3这个属性。 这可能更容易使用。 https://www.w3schools.com/cssref/css3_pr_resize.asp
