css - 可滚动的 div(div 高度 > 浏览器高度)

Question

如果可滚动的 div 的高度小于浏览器的窗口高度，则它很容易实现。示例:https://jsfiddle.net/y59ttm8s/4/您可以使用“内部滚动条”滚动红色 div，这很好。

HTML

<div class="scrollable">
  <div class="content"></div>
</div>

CSS

.scrollable {
    margin-left: 30px;
    float: left;
    height: 400px;       // with a fixed height!
    width: 65px;
    background: red;
    overflow-y: scroll;
}

.content {
    height: 1450px;
}

现在，检查修改后的示例:https://jsfiddle.net/y59ttm8s/5/其中可滚动 div 的高度为 100%。我无法再使用内部滚动条滚动，只能使用浏览器的滚动条。

CSS 更新

.scrollable {
    margin-left: 30px;
    float: left;
    height: 100%;                       // 100% !
    width: 65px;
    background: red;
    overflow-y: scroll;
}

.content {
    height: 1450px;
}

那么，我如何强制使用 div 的滚动条而不是浏览器的滚动条滚动？

Answer 1

您需要为 body 指定高度，否则 scrollable 无法从何处获取其高度。

html, body {
  margin: 0;
  height: 100%;
}
.scrollable {
	margin-left: 30px;
	float: left;
	height: 100%;
	width: 65px;
	background: red;
	overflow-y: scroll;
}

.content {
	height: 1450px;
}

 <div class="scrollable">
   <div class="content">
          
   </div>
 </div>
 

第二个选项是将其更改为视口(viewport)单位。

html, body {
  margin: 0;
}
.scrollable {
	margin-left: 30px;
	float: left;
	height: 100vh;
	width: 65px;
	background: red;
	overflow-y: scroll;
}

.content {
	height: 1450px;
}

 <div class="scrollable">
   <div class="content">
          
   </div>
 </div>