html - 如何显示句柄以向用户指示面板可调整大小？

Question

我正在尝试制作一个侧边栏，用户可以根据自己的喜好调整大小。为了表明您可以调整它的大小，我想在它上面放一个 handle (类似于您可以拖动 Stack Overlfow 的问题框并使其变高的方式)。

我遇到的问题是侧边栏中的 anchor 标记阻止了 handle 成为侧边栏的整个高度。

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

fiddle :https://jsfiddle.net/un3huxee/1/

右边的红条代表的是可能的句柄，但是你可以清楚地看到视觉上有问题。这是将侧边栏的 position 更改为其他内容的问题吗？

Answer 1

您可以将 position: relative 应用于 #container 元素，并将 position: absolute 应用于 #handle元素，并添加顶部和右侧位置。

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>