示例页面：demo1

页面框架构建主要使用css的flex属性

首先要设置HTML和BODY的高度为100%

html, body { height: 100%; margin: 0; }

设置主容器app 高度为100%，

display为flex 开启弹性布局模式

flex-direction: column 定义排列方向。在已开启Flexbox的前提下，此属性指定子元素沿着垂直方向(从上到下)​ 依次排列。

.app { height: 100%; display: flex; flex-direction: column; }

设置头部高56

.header { height: 56px; }

设置度部高40

.footer { height: 40px; }

flex: 1;是一个CSS属性的简写形式，它的核心作用是让一个元素能够自动伸展，尽可能地填满容器中的剩余空间。

.main { flex:1; display:flex; overflow:hidden; position:relative; }

这样就会形成一个上、中、下三行的布局，上面56，下面40，中间自适应。

接下来，再把中间部分，分隔成左右两侧，左侧固定，右侧自适应。

由于main 已经写了display:flex;

所以直接写两个DIV，一个左侧，一个右侧。

左侧样式

.sidebar {width: 240px;background: #212529;color:#adb5bd;overflow-y:auto;transition: width .25s;position:relative;flex-shrink:0;}

右侧样式：

background-color: yellow;flex: 1;overflow:auto;

这样主区域 里面的左右就分开了。

当区域内容超出区域高度时会出现滚动条，但滚动条默认的很宽，占用地方大，还不美观，所以美化一下滚动条。

/* 细窄滚动条，类似 sidebar */

.content .card.flex-grow-1::-webkit-scrollbar {

width: 6px; /* 滚动条宽度 */

}

.content .card.flex-grow-1::-webkit-scrollbar-track {

background: transparent; /* 滚动条轨道 */

}

.content .card.flex-grow-1::-webkit-scrollbar-thumb {

background-color: rgba(0,0,0,0.3); /* 滚动条颜色 */

border-radius: 3px; /* 圆角 */

}

.content .card.flex-grow-1::-webkit-scrollbar-thumb:hover {

background-color: rgba(0,0,0,0.5); /* 悬停变深 */

}

 

至此整体框架结构就创建完成了。