时间戳

首页 > 解决方案 > HTML/CSS：如何防止 DIV 滚动条离开屏幕？

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

问题描述

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

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

在此处输入图像描述

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

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

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

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

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

标签： htmlcssscrollbarcss-positionoverflow

解决方案

有很多解决方案，但最好的一个可能是使用 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的边框，只是为了让元素的位置更清晰。关键线可能是grid-template-rows: auto 1fr;这意味着网格由两行组成。第一行包含您的红色标题。auto表示高度会根据内容自动调整。1fr意味着第二行将占据网格高度的剩余部分。

这是一个有效的 JSFiddle。

推荐阅读