父元素fixed的情况下，实现部分子元素滚动

发表于 | 更新于 | 分类于 | | 阅读次数 |

最近开发页面需要实现一个排行榜页面，其中榜单部分需要fixed固定放在页面底部，同时榜单组件分为标题和内容。内容要滚动，滚动的同时不能遮挡标题。

jsfiddle演示

1
2
3
4
5
6
7
8
9
10
11
12
<div id="container">
  title
  <div id="scroll">  <!--流式布局 scroll部分滚动不会影响title-->
    <div class="item">item1</div>
    <div class="item">item2</div>
    <div class="item">item3</div>
    <div class="item">item4</div>
  </div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
#container {
  width: 100%;
  background-color: red;
  position: fixed;          //父元素fixed
  bottom: 0;
  height: 100px;
}
#scroll {
  background-color: yellow;
  width: 100%;
  height: 100%;                 //要滚动的子元素height必须设为100%
  overflow: scroll;         //overflow必须设置为scroll
}
.item {
  border: 1px solid #fff;
  padding: 10px;
}
分享
0%