调整浏览器屏幕的两半

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

行为与<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>

来源

2016-11-21 Basj

在这里回答[http://stackoverflow.com/questions/17855401/how-do-i-make-a-div-width-draggable](http://stackoverflow.com/questions/17855401/how-do -i-make-a-div-width-draggable） – Lockless

也许没有绝对的位置。位置：绝对的; **意味着**的位置是**绝对**，不能也不会移动，不管怎样。他们的位置被锁定到坐标 – Zoe

@Call_Back_Function是不是很容易没有jQuery？ – Basj

排序是这样的：

* { 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的：活跃的风格是因为issue with chrome不会允许的必要要调整大小的元素小于其初始宽度。在chrome修复它之前解决它是一件很糟糕的事情。

来源

2016-11-21 18:46:29

不错@RobertMcKee，但是如何在垂直线上的任何位置悬停时调整大小？目前它只在悬停在页面底部时才起作用... – Basj

那么你需要一些更复杂的东西，可能需要一些JavaScript和另一个元素作为分隔符。 –

在原始问题中，我有一个分隔符#separator，你认为可以重用它，并有这种行为，没有javascript？ – Basj

调整浏览器屏幕的两半

回答

相关问题