Web 布局设计（一）：固定侧边栏
前言
闲着无事，做一些实战练习，今天实现一个如标题所示的布局设计。通过此次布局设计，我希望掌握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;
}
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;
}
最后
演示地址：本案例在线Demo
代码仓库：Gitee 仓库-本案例-布局设计
Web 布局设计（一）：固定侧边栏的更多相关文章
- 响应式web布局设计实战总结教程
响应性web设计的理念是:页面的设计与开发应当根据用户行为与设备环境(包括系统平台,屏幕尺寸,屏幕定向等)进行相应的响应及调整.具体的实践方式由多方面组成,包括弹性网格和布局,图片,css Media ...
- 重构HTML改善web应用设计
本文从良构,有效性,布局三个角度,结合往日项目开发经历, 整理总结重构HTML改善Web应用设计的几点规则和做法.部分参考自<重构HTML改善Web应用设计>. 重构.什么是重构?为什么要 ...
- CSS布局设计
CSS布局设计: (1)固定布局:各个部分采用固定宽度的页面布局. (2)流式布局:通过定义模块和模块间距的百分比的方式来实现.缺点是会自动缩放,影响图片的美观. (3)响应式布局:页面可以用户的设备 ...
- Web交互设计优化的简易check list
Web交互设计优化的简易check list 00 | 时间: 2011-02-11 | 28,842 Views 交互设计, 用户研究 “优化已有产品的体验”,这是用户体验相关岗位职责中常见的描 ...
- css 关于两栏布局，左边固定，右边自适应
好几个星期都没写博客了,最近不忙也不闲,稀里糊涂过了两个星期,之前几个月内天天坚持签到.最近也没签到.哈哈,说正事. 今天做东钿互金平台后台页面,昨天做了一个登录页面,业偶碰到了一个难题.等下也要把它 ...
- Web前端设计:Html强制不换行<nobr>标签用法代码示例
在网页排版布局中比如文章列表标题排版,无论多少文字均不希望换行显示,需要强制在一行显示完内容.这就可以nobr标签来实现.它起到的作用与word-break:keep-all 是一样的.nobr 是 ...
- 必胜宅急送Web app设计背后的思考
O2O模式是餐饮业在移动消费趋势下主动拥抱互联网的方向,迎合餐饮消费者从以往经验判断为主转变为依靠移动设备.lbs.社交网络进行立体决策的过程.继App客户端之后,手机web app也逐渐成为O2O中 ...
- iOS发展 ---- 至iPhone 6自适应布局设计 Auto Layout
Apple从iOS 6增加了Auto Layout后開始就比較委婉的開始鼓舞.建议开发人员使用自适应布局,可是到眼下为止,我感觉大多数开发人员一直在回避这个问题,无论是不是因为历史原因造成的,至少他们 ...
- WeUI 是由微信官方设计团队专为微信移动 Web 应用设计的 UI 库
WeUI 是由微信官方设计团队专为微信移动 Web 应用设计的 UI 库. WeUI 是一套同微信原生视觉体验一致的基础样式库,为微信 Web 开发量身设计,可以令用户的使用感知更加统一.包含butt ...
随机推荐
- React BrowserHistory 踩坑实录 布置到服务器Nginx上各种静态文件、二级地址404
由于BrowserHistory访问的是文件真实地址不仅需要前端配置package.json还需要运维端配置一下网站Nginx设置环境: "react": "^17.0. ...
- Docker容器手动安装oracle19C
Docker容器手动安装oracle19C docker容器体积小,与宿主机共用内核参数,因此修改宿主机的内核参数即是修改容器的内核参数 1.修改宿主机内核参数 [root@localhost ~]# ...
- 14.Nginx搭建及优化
Nginx搭建及优化 目录 Nginx搭建及优化 Nginx服务基础 概述 Nginx和Apache的优缺点比较 编译安装Nginx服务 添加Nginx系统服务 Nginx服务配置文件 nginx服务 ...
- 分享自己平时使用的socket多客户端通信的代码技术点和软件使用
前言 说到linux下多进程通信,有好几种,之前也在喵哥的公众号回复过,这里再拿出来,重新写一遍:多进程通信有管道,而管道分为匿名和命名管道 ,后者比前者优势在于可以进行无亲缘进程通信:此外信号也是进 ...
- 零基础学Python：元组（Tuple)详细教程
Python的元组与列表类似,不同之处在于元组的元素不能修改,元组使用小括号,列表使用方括号,元组创建很简单,只需要在括号中添加元素,并使用逗号隔开即可https://jq.qq.com/?_wv=1 ...
- 常用的Linux命令和Git的必要配置
常用的Linux命令平时一定要多使用这些基础的命令! 1.cd : 改变目录. 2.cd . . 回退到上一个目录,直接cd进入默认目录 3.pwd : 显示当前所在的目录路径. 4.ls(ll): ...
- Spring 核心概念
Spring 核心概念 引言 本文主要介绍 Spring 源码中使用到的一些核心类 1. BeanDefinition BeanDefinition表示Bean定义,BeanDefinition 中存 ...
- Deep Learning-深度学习（二）
深度学习入门 1.随机梯度下降 在之前的学习过程当中,对于损失函数的最为重要的参数的梯度的更新是基于数据集中的所有数据,每一个数据都会进行到计算过程当中去,在本案例中,因为波士顿房价预测这个案例所涉及 ...
- Solution -「Luogu 3959」 宝藏
果真是宝藏题目. 0x01 前置芝士 这道题我是真没往状压dp上去想.题目来源. 大概看了一下结构.盲猜直接模拟退火!\xyx 所需知识点:模拟退火,贪心. 0x02 分析 题目大意:给你一个图,可能 ...
- led跑马灯多种方法（移位法，位拼接法，调用模块法，位移及位拼接语法，testbench的理解，源文件的存储路径，计数器的个数，调用模块的方式）
跟着教程写了几种方法,才发现自己写的虽然能实现,但比较繁琐.教程有三种方法: 1.移位法,每次左移一位,相比我自己写的,优点是不用把每一种情况都写出来.但是需要考虑左移到最后一位时需要自己再写个赋值语 ...