前言

闲着无事，做一些实战练习，今天实现一个如标题所示的布局设计。通过此次布局设计，我希望掌握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. Flask 之 高可用IP代理网站

    高可用代理IP网站 目标:提供高可用代理IP 步骤一:通过爬虫获取代理IP 步骤二:对代理IP进行检测,判断代理是否可用 步骤三:将可用的代理IP写入mongodb数据库 步骤四:创建网站,从数据库获 ...

  2. JNPF.java前后端分离框架，SpringBoot+SpringCloud开发微服务平台

    JNPF.java版本采用全新的前后端分离架构模式.前后端分离已成为互联网项目开发的业界标准开发方式,通过 nginx+tomcat 等方式有效的进行解耦合,并且前后端分离会为以后的大型分布式架构.弹 ...

  3. 小样本利器1.半监督一致性正则 Temporal Ensemble & Mean Teacher代码实现

    这个系列我们用现实中经常碰到的小样本问题来串联半监督,文本对抗,文本增强等模型优化方案.小样本的核心在于如何在有限的标注样本上,最大化模型的泛化能力,让模型对unseen的样本拥有很好的预测效果.之前 ...

  4. Linux Cgroup v1(中文翻译)(2)：CPUSETS

    英文原文:https://www.kernel.org/doc/html/latest/admin-guide/cgroup-v1/cpusets.html Copyright (C) 2004 BU ...

  5. Mac Book安装Windows发烫的问题

    Mac Book安装Windows后,电脑发烫,风扇一直高速旋转.针对此问题百度搜索了一下, 大多数人说更改电源选项,由"平衡"模式改为"节能"模式,亲身体验了 ...

  6. 基于SqlSugar的开发框架循序渐进介绍（9）-- 结合Winform控件实现字段的权限控制

    字段的权限控制,一般就是控制对应角色人员对某个业务对象的一些敏感字段的可访问性:包括可见.可编辑性等处理.本篇随笔结合基于SqlSugar的开发框架进行的字段控制管理介绍. 在设计字段权限的时候,我们 ...

  7. JavaScript写放大镜效果

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. Windows 2008R2 IIS环境配置(靶机)

    一.Windows 2008 R2系统安装 VMware Workstation 15安装包 链接:https://pan.baidu.com/s/11sYcZTYPqIV-pyvzo7pWLQ 提取 ...

  9. Redis基础与性能调优

    Redis是一个开源的,基于内存的结构化数据存储媒介,可以作为数据库.缓存服务或消息服务使用. Redis支持多种数据结构,包括字符串.哈希表.链表.集合.有序集合.位图.Hyperloglogs等. ...

  10. Linux 目录挂载服务

    Linux 服务器挂载文件目录通常有三种形式,手动挂载.自动挂载.Autofs 自动挂载,下面对这三个挂载做一下介绍,接受一下这三个区别以及使用场景: 准备服务器和客户端: server 192.16 ...