使用溢出的元素：滚动滚动条离开屏幕

Question

html, body {
  min-height: 100%;
  margin: 0;
  padding: 0;
  overflow-y: hidden;
}

#sidebar {
  background-color: white;
  height: 100%;
  width: 20%;
  float: left;
  position: fixed;
  box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.5);
  padding-bottom: 6em;
  overflow-x: scroll;
}

侧边栏有一个卷轴，距离屏幕约50px，请参阅提供的图像。我尝试在身体和#sidebar上使用填充或边距，但无济于事。

Answer 1

因为＃sidebar的容器没有设定高度，所以100％的高度将是自动的。滚动条将是它的容器（#sidebar）的大小，所以它只会伸展。尝试这样的事情：

#sidebar {
  top: 0;
  bottom: 0;
}

您也可以使用窗口单位：

#sidebar {
  height: 100vh;
}