パネルにサイズ変更可能であることをユーザーに示すハンドルを表示するにはどうすればよいですか？

Question

私はユーザーが自分の好みに合わせてサイズ変更できるサイドバーを作ろうとしています。サイズを変更できることを示すために、Stack Overlfowの質問ボックスをドラッグして背を高くする方法に似たハンドルを置いておきたいと思います。

問題は、サイドバーのアンカータグが、サイドバーの高さ全体からハンドルをブロックしていることです。

HTML：

<div id = "container"> 
    <a href="#">Something</a> 
    <a href="#">Another thing</a> 
    <a href="#">Last thing</a> 
    <div id = "handle"></div> 
</div> 

CSS：

html, body { 
    margin: 0; 
    padding: 0; 
    height: 100%; 
} 

#container { 
    height: 100%; 
    width: 250px; 
    border: 2px solid black; 

    text-align: center; 
} 

#handle { 
    height: 100%; 
    width: 2px; 
    float: right; 
    background-color: red; 
} 

a { 
    display: block; 
} 

フィドル：https://jsfiddle.net/un3huxee/1/

右側の赤いバーは-されるだろう扱う表すが、あなたがそこにあることをはっきりと見ることができます視覚的な問題。これは、サイドバーのpositionを別のものに変更する問題ですか？

Answer 1

あなたは#handle要素に#container要素とposition: absoluteにposition: relativeを適用し、上と右の位置を追加することができます。

html, 
 
body { 
 
    margin: 0; 
 
    padding: 0; 
 
    height: 100%; 
 
} 
 

 
#container { 
 
    height: 100%; 
 
    width: 250px; 
 
    border: 2px solid black; 
 
    text-align: center; 
 
    position: relative; 
 
} 
 

 
#handle { 
 
    height: 100%; 
 
    width: 2px; 
 
    position: absolute; 
 
    top: 0px; 
 
    right: 0px; 
 
    background-color: red; 
 
} 
 

 
a { 
 
    display: block; 
 
}

<div id="container"> 
 
    <a href="#">Something</a> 
 
    <a href="#">Another thing</a> 
 
    <a href="#">Last thing</a> 
 
    <div id="handle"></div> 
 
</div>

---

または最小限の干渉を有する代わりに、実際の要素のボックスシャドウを使用します。

html, 
 
body { 
 
    margin: 0; 
 
    padding: 0; 
 
    height: 100%; 
 
} 
 

 
#container { 
 
    height: 100%; 
 
    width: 250px; 
 
    border: 2px solid black; 
 
    text-align: center; 
 
} 
 

 
.handle { 
 
    box-shadow: -3px 0px 0 0 #f00 inset; 
 
} 
 

 
a { 
 
    display: block; 
 
}

<div id="container" class="handle"> 
 
    <a href="#">Something</a> 
 
    <a href="#">Another thing</a> 
 
    <a href="#">Last thing</a> 
 
    <!--div id="handle"></div--> 
 
</div>