調整瀏覽器屏幕的兩半

如何使將鼠標懸停在兩個元素（這裏是分隔藍色和紅色的垂直線上）之間的邊界上是否可以調整每個元素的寬度？調整瀏覽器屏幕的兩半

行爲與<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

調整瀏覽器屏幕的兩半

回答

相關問題