fixed布局兼容写法

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)；