javascript - 调整浏览器屏幕的两半

Question

如何将鼠标悬停在两个元素之间的边界上(此处位于分隔蓝色和红色的垂直线上) 是否可以调整每个元素的宽度？

我正在寻找 https://stackedit.io/editor 的行为

这可以直接用 <textarea> 实现吗？调整大小的可能性？

* { margin: 0; border: 0; padding: 0; }
textarea { background-color: red; width: 50%; position: absolute; top:0; left:0; height: 100%; }
#separator { cursor: ew-resize; position: absolute; top:0; width:1%; left:50%; height: 100%; }
#right { background-color: blue; width: 49%;  position: absolute; top:0; right:0; height: 100%;}

<textarea>hello</textarea>
<div id="separator"></div>
<div id="right">yo</div>

Answer 1

有点像这样:

* { margin: 0; border: 0; padding: 0; }
html,body { height: 100% }
textarea { background-color: red; width: 50%; height: 100%; resize: horizontal; min-width: 1px; max-width: 99%; float: left; }
div { background-color: blue; height: 100%}
textarea:active {width: 1px;}

<textarea>hello</textarea>
<div>yo</div>

请注意，textarea:active 样式是必需的，因为 issue with chrome这将不允许调整元素的大小小于它的初始宽度。在 chrome 修复它之前解决它是一个糟糕的 hack。