【问题标题】：Fixed content within scrollable column可滚动列中的固定内容
【发布时间】：2019-01-03 13:16:33
【问题描述】：
我的页面上有两个可单独滚动的列。在具有导航作用的左侧列中，我有两个子元素，它们现在可以一起滚动：
<div class="row">
<div class="col-3 theme-background left-panel nav-scroll">
<p> a - this part I want to be fixed <p>
<div>
<p> b - this part is scrollable </p>
</div>
</div>
<div class="col-9 nav-scroll">
<p> c - scrollable as well<p>
</div>
</div>
一般视图显示在下面的 jfiddle 中：
https://jsfiddle.net/macfol/wtx9zhsq/
我想要实现的是让底部 (b) 可滚动，而顶部 (a) 固定在列的顶部并始终对用户可见。
【问题讨论】：
标签：
html
scroll
bootstrap-4
【解决方案2】：
.nav-scroll {
overflow-y: auto;
overflow-x: hidden;
height: 90vh;
float:left;
bottom: 0;
top:0;
}
body, html {
margin: 0;
overflow: hidden;
height:100%;
}
.pLeftBar {
overflow: hidden;
}
.pFixed {
height: 30%;
overflow: hidden;
}
.pScroll {
height: 70%;
overflow-y: auto;
overflow-x: hidden;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-3 theme-background left-panel nav-scroll pLeftBar">
<div class="pFixed">
<p>
aaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaa
</p>
</div>
<div class="pScroll">
<p>
bbbbbbbbbbbbbbbb
bbbbbbbbbbbbbbbb
bbbbbbbbbbbbbbbb
bbbbbbbbbbbbbbbb
bbbbbbbbbbbbbbbb
bbbbbbbbbbbbbbbb
bbbbbbbbbbbbbbbb
bbbbbbbbbbbbbbbb
bbbbbbbbbbbbbbbb
bbbbbbbbbbbbbbbb
bbbbbbbbbbbbbbbb
bbbbbbbbbbbbbbbb
bbbbbbbbbbbbbbbb
</p>
</div>
</div>
<div class="col-9 nav-scroll">
<p>
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
</p>
</div>
</div>
【解决方案3】：
类似的东西？
.head{
position: relative;
background: #FFF;
overflow-y: none;
overflow-x: hidden;
height: 20vh;
z-index: 1;
}
.nav-scroll {
position: relative;
overflow-y: none;
overflow-x: hidden;
height: 90vh;
float:left;
margin 0 0 0 0;
}
body, html {
margin: 0;
padding 0;
overflow-y: hidden;
width: 350px;
height:auto;
}
<body>
<div class="head col-9" >
<p>
aaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaa
</p>
<p>
bbbbbbbbbbbbbbbb
bbbbbbbbbbbbbbbb
bbbbbbbbbbbbbbbb
bbbbbbbbbbbbbbbb
bbbbbbbbbbbbbbbb
bbbbbbbbbbbbbbbb
bbbbbbbbbbbbbbbb
bbbbbbbbbbbbbbbb
bbbbbbbbbbbbbbbb
bbbbbbbbbbbbbbbb
bbbbbbbbbbbbbbbb
bbbbbbbbbbbbbbbb
bbbbbbbbbbbbbbbb
</p>
</div>
<div class="col-9 nav-scroll">
<p>
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
ccccccccccccc
</p>
</div>
</body>