正文

Web 布局设计（一）：固定侧边栏

IP云
IP云V管理员/2 阅读
12/02
提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

前言

闲着无事，做一些实战练习，今天实现一个如标题所示的布局设计。通过此次布局设计，我希望掌握 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;

}
  1. display: flex 让 div.aside-wrap.content 垂直居中显示。
  2. box-sizeing: border-box 避免因为 padding 值而超出盒子模型的最大范围。
  3. position: fixed 让侧边栏固定在左上角。
  4. 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 仓库-本案例-布局设计

相关阅读

目录[+]