前言
闲着无事，做一些实战练习，今天实现一个如标题所示的布局设计。通过此次布局设计，我希望掌握position属性值 fixed、absolute、relative。width和height属性值 inherit、百分比的区别和作用。布局的效果：
布局可以适应窗口高和宽的变化，这种就需要监听窗口，以及运用 CSS 变量的知识。
起步
根据布局实现的效果图可知，左右排列的是两个div块级元素，第二个块级元素内是传统的文档流排列方式，即上下排列。头部是一个固定定位，与侧边栏的定位一致。内容区域可以滚动，不受窗口高度限制。HTML 结构：
<div id="app">
<div class="aside">
<div class="aside-wrap">
<div class="content">hello world</div>
</div>
</div>
<div class="middle">
<div class="header">
<div>header</div>
</div>
<div class="content-wrap">
<div class="main">main</div>
<div class="footer">footer</div>
</div>
</div>
</div>
整体样式
块级元素div默认的文档流是上下排列，使用display: flex修改文档流的排列方式：
div#app {
display: flex;
justify-content: space-between;
box-sizing: border-box;
flex-direction: row;
flex-wrap: nowrap;
height: inherit;
width: inherit;
}
注意，div#app的 height 和 width 两个属性值 inherit 表示继承父元素的值，div#app的父元素是<body>。body 的高和宽等于浏览器窗口的高和宽：
// 当浏览器加载完成之后，开始查询窗口高和宽，并把 css 变量交给 html 元素
$(window).on("load", function () {
$("html").css({
"--window-height": `${ $(this).height() }px`,
"--window-width": `${ $(this).width() } px`
});
});
// 当浏览器窗口发生变化（缩放）时，重新把高宽交给 html 元素
$(window).on("resize", function () {
$("html").css({
"--window-height": `${ $(this).height() }px`,
"--window-width": `${ $(this).width() } px`
});
});
当窗口加载完成之时，向 html 添加两个 CSS 变量；当浏览器窗口发生缩放时，重新计算窗口高度和宽度。body 的高宽属性值使用变量：
body {
margin: 0,
padding: 0,
height: var(--window-height);
width: var(--window-width);
}
侧边栏样式
侧边栏是固定定位，内容超出侧边栏最大高度时，可以竖向滑动内容。
（1）侧边栏div.aside的样式：
.aside {
width: 120px;
height: inherit; /* 高度继承父元素，body 的高度 */
}
（2）侧边栏div.aside-wrap的样式：
.aside .aside-wrap {
border-radius: 4px;
padding: 10px 0;
display: flex;
justify-content: center;
align-content: center;
flex-direction: row;
flex-wrap: nowrap;
box-sizing: border-box;
background-color: #00B7FF;
height: inherit;
width: inherit;
position: fixed;
overflow-x: hidden;
overflow-y: auto;
left: 0;
top: 0;
}
display: flex让div.aside-wrap.content垂直居中显示。box-sizeing: border-box避免因为padding值而超出盒子模型的最大范围。position: fixed让侧边栏固定在左上角。overflow-y: auto让侧边栏随着div.aside-wrap.content而滚动。主体区域
主体样式
侧边栏是固定定位，脱离文档流，不占用空间位置，和绝对定位是同一个道理。本人写了另一篇文章《Web 前端实战（一）：实现类似微信头像状态的小组件》中阐述了绝对定位的概念。
所以，主体区域中div.middle节点的width需要使用calc函数进行计算。计算单位量是整个 body 的宽度减去侧边栏的宽度，因为div#app节点流式布局（display：flex）让左右均匀撑满空间，所以再减去 10px 单位，使得中间留有空隙。因此：width: calc(100% - 130px)。
.middle {
position: relative;
border-radius: 4px;
height: auto;
width: calc(100% - 130px);
}
头部样式
头部的样式比较简单，直接让它的定位设置成固定即可，并让它贴紧左上角，即top: 0。
.middle .header {
z-index: 999;
height: 40px;
width: 100%;
box-sizing: border-box;
position: fixed;
top: 0;
background-color: #C4A0CC;
}
内容样式
因为头部占了 40px，并且是固定的，如果内容不用绝对定位，就有 40px 的空间被头部区域覆盖。使用绝对定位，top设置成头部高度再加 10px。
.middle .content-wrap {
position: absolute;
top: 50px;
left: 0;
width: 100%;
height: auto;
border-radius: 4px;
box-sizing: border-box;
background-color: #AAAAAA;
}
最后
演示地址：本案例在线Demo
代码仓库：Gitee 仓库-本案例-布局设计
