css 头部底部固定,中间滑动
Sonder
2022-01-08
525字
1分钟
浏览 (4.8k)
<div class="layout">
<div class="base-header"></div>
<div class="base-main"></div>
<div class="base-footer"></div>
</div>
他的父级高度必须为100%
html, body, #root, .layout {
height: 100%
}
.layout {
display: flex;
flex-direction: column;
.base-main {
flex: 1;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
}
.base-header, .base-footer {
height: 50px;
width: 100%;
}
}
![](https://s2.loli.net/2022/01/08/JDbFRI9rUgjaQkh.png)