DOM结构
<div>
<div className={styles.tableMock}>
<div className={styles.tableHeader}></div>
<div className={styles.ulWrap} style={{height:`calc(${document.body.clientHeight}px)`}}>
<div className={styles.tBodyWrap}>
<div className={styles.content}>neirongqu</div>
</div>
</div>
</div>
</div>
css样式
.tableMock{
overflow: hidden; // 使整个tableMock区不可滚动
}
.tableHeader{
height: 11vw;
line-height: 9vw;
padding: 0 3vw;
position: absolute; // 绝对定位在最顶部
top: 0; // 绝对定位在最顶部
width: 100vw; // 撑开屏幕宽度
background: #fff;
border: 1px solid red;
}
.ulWrap{
overflow: auto; // 使内容区具有滚动条效果
border: 1px solid green;
.tBodyWrap{
margin-top: 11vw; // tableHeader绝对定位后脱离文档流,设置margin-top= tableHeade的高度,使内容区上面的部分不被覆盖
.content{
height: 300vw;
}
}
}
效果图:
需要注意的是,用到了calc计算属性计算出ulWrap的高度,超出该高度,出现滚动效果。运算符前后都需要保留一个空格,例如:width: calc(100% - 10px);