前言

闲着无事，做一些实战练习，今天实现一个如标题所示的布局设计。通过此次布局设计，我希望掌握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. PostMan 快快走开, ApiFox 来了, ApiFox 强大的Api调用工具

    简介 为什么要用ApiFox呢, 一般现在程序员开发测试, 一般都是PostMan, PostWoman等Api调用工具, 我之前也是一直在用, 但是今天我发现了一款相比于Postman更加好用的工具 ...

  2. 记录人生中的第一个bug

    对象的引用 使用**只是拷贝了字典的最外层,加个deepcopy可以实现深拷贝,递归的去复制对象 bug来源: 在一次将数据库里的数据转成json格式过程中,在遍历数据库对象时,对象的引用不当,导致最 ...

  3. Citus 11 for Postgres 完全开源，可从任何节点查询(Citus 官方博客)

    Citus 11.0 来了! Citus 是一个 PostgreSQL 扩展,它为 PostgreSQL 添加了分布式数据库的超能力. 使用 Citus,您可以创建跨 PostgreSQL 节点集群透 ...

  4. 智慧机房3D可视化技术解决方案

    随着夏季气温越来越高,机房内大量设备同步工作时,难免使机房内温度飙升. 机房温度每升高10℃,计算机的可靠性就下降25% 磁盘磁带也会因热涨效应造成记录错误 计算机的时钟主频在温度过高都会降低 UPS ...

  5. 简述电动汽车的发展前景及3D个性化定制需求

    李彦宏前几天又搞事,他宣布百度要开始造电动汽车了!百度市值更是因此一夜暴涨了700亿. 这熟悉的配方,好像在乔布斯.库克那里也见过. 苹果的"iCar"(或者是Apple Car) ...

  6. arcgis创建postgre企业级数据库

    什么是企业级地理数据库? 企业级地理数据库(ArcSD Enterprise,sde)是和 arcGIS 套件集成程度最高的地理数据库:创建时需要用到安装 arcGIS Server 时的 [ecp ...

  7. 鼠标右键打开powershell

    不需要更改配置文件什么的. 在桌面空白处按住Shift键同时鼠标右击,看看是不是就有了呢.

  8. # Vue3 toRef 和 toRefs 函数

    Vue3 toRef 和 toRefs 函数 上一篇博文介绍了 vue3 里面的 ref 函数和 reactive 函数,实现响应式数据,今天主要来说一下 toRef 函数和 toRefs 函数的基本 ...

  9. SpringCloudGateway微服务网关实战与源码分析 - 中

    实战 路由过滤器工厂 路由过滤器允许以某种方式修改传入的HTTP请求或传出的HTTP响应.路由过滤器的作用域是特定的路由.SpringCloud Gateway包括许多内置的GatewayFilter ...

  10. C++类中的常成员和静态成员

    常变量.常对象.常引用.指向常对象或常变量的指针等在定义时都使用了const关键字,这是C++语言引入的一种数据保护机制,称为const数据保护机制.例如通过const关键字主动地将被调函数形参进行限 ...