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

您可以将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>

如何显示句柄以向用户表明面板是否可调整大小？

1 个答案: