HTML/CSS: 如何防止 DIV 滚动条离开屏幕？

Question

似乎有一些关于这个问题的 Whosebug 帖子，但我仍然无法解决问题。

所以，我提供了非常准确的 HTML/CSS：https://jsfiddle.net/dbaroncelli/r08qfcv2/2/

如您所见，滚动条在顶部时以其自身的长度显示。

但是当你滚动到底部时，滚动条的一部分会被隐藏，文本的底部也会被隐藏。

如何解决这个问题，使文本的底部不被隐藏？

这是 CSS，您也可以在上面的 Fiddle link 中找到它：

body {
  box-sizing: border-box;
  position: fixed;
  height: 100%;
  width: 100%;
  padding: 0px;
  margin: 0px;
}

.topdiv {
  background-color: #FF0000;
}

.scrolldiv {
  overflow-y: scroll;
  height: 100%;
  width: 100%;
}

Answer 1

有很多解决方案，但最好的可能是使用 CSS Grid，但请检查您的目标浏览器是否支持它（IE 是目前唯一有问题的浏览器）。

CSS 应如下所示：

body {
  box-sizing: border-box;
  position: fixed;
  padding: 0px;
  margin: 0px;
  left: 10px;
  right: 10px;
  top: 10px;
  bottom: 10px;
  display: grid;
  grid-template-rows: auto 1fr;
}

.topdiv {
  background-color: #FF0000;
}

.scrolldiv {
  overflow-y: scroll;
  background: yellow;
}

我偏移了body的边界只是为了更清楚elements.The关键线的位置可能是grid-template-rows: auto 1fr;这意味着网格由两行组成。第一行包含您的红色 header。 auto表示高度会根据这个内容自动调整。 1fr表示第二行将占据网格剩余的高度。

here 是一个有效的 JSFiddle。

HTML/CSS: 如何防止 DIV 滚动条离开屏幕？

HTML/CSS: How to prevent DIV scrollbar going off screen?

html

css

css-position

overflow

scrollbar