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无法从哪里获得它的高度。

＆＃13;

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

＆＃13;

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

＆＃13;

第二个选项是将其更改为视口单元。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

希望下面给出的代码段可以帮助你。

body{margin:0; padding:0;}
.scrollable {
  margin:0;padding:0;
	margin-left: 30px;
	height: 100%;
	width: 65px;
	background: red;
	overflow-y: scroll;
  position:absolute;
  top:0;
}

.content {
	height: 1450px;
}

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

可滚动div（div高度＆gt;浏览器高度）

2 个答案: