调整浏览器屏幕的两半

Question

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

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

的行为

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

＆＃13;

＆＃13;

* { 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%;}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

有点像这样：

＆＃13;

＆＃13;

* { 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;}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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