前言

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

Web 布局设计（一）：固定侧边栏的更多相关文章

  1. 响应式web布局设计实战总结教程

    响应性web设计的理念是:页面的设计与开发应当根据用户行为与设备环境(包括系统平台,屏幕尺寸,屏幕定向等)进行相应的响应及调整.具体的实践方式由多方面组成,包括弹性网格和布局,图片,css Media ...

  2. 重构HTML改善web应用设计

    本文从良构,有效性,布局三个角度,结合往日项目开发经历, 整理总结重构HTML改善Web应用设计的几点规则和做法.部分参考自<重构HTML改善Web应用设计>. 重构.什么是重构?为什么要 ...

  3. CSS布局设计

    CSS布局设计: (1)固定布局:各个部分采用固定宽度的页面布局. (2)流式布局:通过定义模块和模块间距的百分比的方式来实现.缺点是会自动缩放,影响图片的美观. (3)响应式布局:页面可以用户的设备 ...

  4. Web交互设计优化的简易check list

    Web交互设计优化的简易check list 00 | 时间: 2011-02-11 | 28,842 Views 交互设计, 用户研究   “优化已有产品的体验”,这是用户体验相关岗位职责中常见的描 ...

  5. css 关于两栏布局，左边固定，右边自适应

    好几个星期都没写博客了,最近不忙也不闲,稀里糊涂过了两个星期,之前几个月内天天坚持签到.最近也没签到.哈哈,说正事. 今天做东钿互金平台后台页面,昨天做了一个登录页面,业偶碰到了一个难题.等下也要把它 ...

  6. Web前端设计:Html强制不换行<nobr>标签用法代码示例

    在网页排版布局中比如文章列表标题排版,无论多少文字均不希望换行显示,需要强制在一行显示完内容.这就可以nobr标签来实现.它起到的作用与word-break:keep-all 是一样的.nobr 是 ...

  7. 必胜宅急送Web app设计背后的思考

    O2O模式是餐饮业在移动消费趋势下主动拥抱互联网的方向,迎合餐饮消费者从以往经验判断为主转变为依靠移动设备.lbs.社交网络进行立体决策的过程.继App客户端之后,手机web app也逐渐成为O2O中 ...

  8. iOS发展 ---- 至iPhone 6自适应布局设计 Auto Layout

    Apple从iOS 6增加了Auto Layout后開始就比較委婉的開始鼓舞.建议开发人员使用自适应布局,可是到眼下为止,我感觉大多数开发人员一直在回避这个问题,无论是不是因为历史原因造成的,至少他们 ...

  9. WeUI 是由微信官方设计团队专为微信移动 Web 应用设计的 UI 库

    WeUI 是由微信官方设计团队专为微信移动 Web 应用设计的 UI 库. WeUI 是一套同微信原生视觉体验一致的基础样式库,为微信 Web 开发量身设计,可以令用户的使用感知更加统一.包含butt ...

随机推荐

  1. java通过socket实现https get 请求网页

    1. 首先要初始化ssl context SSLContext context = SSLContext.getDefault(); socket = (SSLSocket) context.getS ...

  2. Linux常用命令-创建用户修改密码-useradd

    命令简介 useradd/userdel 创建新用户/删除用户,需要管理员权限操作. 在创建用户时,如果不配置密码,用户的默认密码是不可用的,所以,useradd命令一般与passwd命令配合使用,下 ...

  3. 1.2 操作系统的第二个功能——并发功能 -《zobolの操作系统学习札记》

    1.2 操作系统的第二个功能--并发功能 目录 1.2 操作系统的第二个功能--并发功能 问1:什么是并发功能?并发功能是必要的吗? 问2:并发功能必须要求拥有多核CPU吗? 问3:多核CPU和单核C ...

  4. JS：Boolean

    Boolean数据类型: 有两个值:true false Boolean会把不是Boolean的值变为Boolean值 var a = 1; var b = true; var c = 0; var ...

  5. 关于全栈项目【臻美Chat】https访问 遇到的问题【技术栈：Nodejs】

    首先我上线时可以http访问也可以https访问,那么配置如下:nginx.conf user root;worker_processes auto;error_log /var/log/nginx/ ...

  6. nifi从入门到实战（保姆级教程）——身份认证

    上一篇我们搭建好了nifi的运行环境了 但是每次登陆那一串随机字符串的用户名和密码是不是让人很头疼,那是人类能记住的吗?当然不是!!!! 那么今天我们就来消灭这些难看又难记的字符串. windows( ...

  7. zabbix监控mysql主从同步

    获取主从复制sql线程和I/O线程状态是否为yes #!/bin/bash HOSTNAME="数据库IP" PORT="端口" USERNAME=" ...

  8. bat-windows系统激活

    激活命令 slmgr -ipk M7XTQ-FN8P6-TTKYV-9D4CC-J462D slmgr -skms kms.03k.org slmgr -ato slmgr -dlv 激活异常处理方法 ...

  9. java包机制

  10. ModuleNotFoundError: No module named 'distutils.spawn'

    解决办法: 安装python3-distutils sudo apt-get install python3-distutils