调整浏览器屏幕的两半

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。