vue 固定div 滚动_css固定div头部 滚动条滚动内容

页面布局，固定头部，滚动下方内容

实际场景

在制作页面的时候，经常会遇到要这样的情况：整个页面，整体分三大模块，头部固定，内容区域，左边固定，右边可以滚动。

最终想要的效果

案例源码

css固定div头部，滚动条滚动内容

.headDiv {

position: fixed;

/*固定定位*/

top: 0;

right: 0;

bottom: 0;

left: 0;

width: 100%;

height: 60px;

border: 1px solid blue;

}

.contentDiv {

position: fixed;

/*固定定位*/

top: 60px;

right: 0;

bottom: 0;

left: 0;

width: 100%;

height: 100%;

border: 1px solid red;

}

.content-left {

position: fixed;

/*固定定位*/

top: 60px;

right: 0;

bottom: 10px;

left: 0;

width: 200px;

border: 1px solid red;

}