首页 > 其他分享> > 布局设计：实现侧边栏固定，内容可滚动；头部固定，内容可滚动的布局

布局设计：实现侧边栏固定，内容可滚动；头部固定，内容可滚动的布局

2022-05-30 02:31:07 作者：互联网

前言

闲着无事，做一些实战练习，今天实现一个如标题所示的布局设计。通过此次布局设计，我希望掌握position属性值 fixed、absolute、relative。width和height属性值 inherit、百分比的区别和作用。布局的效果：

布局可以适应窗口高和宽的变化，这种就需要监听窗口，以及运用 CSS 变量的知识。

起步

根据布局实现的效果图可知，最大的布局是左右排列的两个div块级元素，第二个块级元素内是传统的文档流排列方式，即上下排列。头部是一个固定定位，与侧边栏的定位一致。内容区域可以滚动，不受窗口高度限制。

<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 的高和宽等于窗口的高和宽，才能够让div#app继承父元素的值。

// 当浏览器加载完成之后，开始查询窗口高和宽，并把 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 变量；当浏览器窗口发生缩放时，重新计算窗口高度和宽度，再次给 html 添加 CSS 变量。

body {
	margin: 0,
	padding: 0,
	height: var(--window-height);
	width: var(--window-width);
}

侧边栏样式

侧边栏最外层的节点高度与窗口高度一致，宽度可以自定义设置，我设置成120px大小。侧边栏内容是固定定位，内容超出侧边栏最大高度时，可以竖向滑动内容。

（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;
}

结束

演示地址：2022年5月30日-布局设计演示地址；
代码仓库：《Gitee 仓库-布局设计-2022年5月30日》

标签：box,flex,滚动,布局,侧边,height,width,固定,div
来源： https://www.cnblogs.com/shiramashiro/p/16325436.html