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

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

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>

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

How do I show a handle to indicate to the user that a panel is resizable?

html

css

resize

position

sidebar