页面布局,固定头部,滚动下方内容
实际场景
在制作页面的时候,经常会遇到要这样的情况:整个页面,整体分三大模块,头部固定,内容区域,左边固定,右边可以滚动。
最终想要的效果
案例源码
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;
}