巧用flex(一)
在开发中我们经常遇到一个页面头部内容固定顶部,中间内容可滚动的需求,一般的逻辑就是把头部内容通过position以及z-index固定位置,提高层级,然后中间内容设置距离顶部一定距离,这样的效果是侧边滚动条的位置是从顶部开始的:
如果我们不想用定位,且要求滚动条位置从需要滚动的区域开始,这是flex就派上了用场,主要步骤如下:
一、给包含头部。中间部、脚部等内容的父元素添加样式:
display: flex;
flex-direction: column;
二、给滚动内容父元素添加样式:
flex: 1;
overflow: scroll;
最终效果:
巧用flex(一)的更多相关文章
- OpenCASCADE Expression Interpreter by Flex & Bison
OpenCASCADE Expression Interpreter by Flex & Bison eryar@163.com Abstract. OpenCASCADE provide d ...
- Flex 布局教程:语法篇
作者: 阮一峰 网页布局(layout)是CSS的一个重点应用. 布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性.它对于那些特殊布局非常不方便 ...
- Flex 布局教程:实例篇
该教程整理自 阮一峰Flexible教程 今天介绍常见布局的Flex写法.你会看到,不管是什么布局,Flex往往都可以几行命令搞定. 我的主要参考资料是Landon Schropp的文章和Solved ...
- CSS布局之div交叉排布与底部对齐--flex实现
最近在用wordpress写页面时,设计师给出了一种网页排布图样,之前从未遇到过,其在电脑上(分辨率大于768px)的效果图如下: 而在手机(分辨率小于等于768px)上要求这样排列: 我想到了两种方 ...
- Flexible 弹性盒子模型之flex
实例 让所有弹性盒模型对象的子元素都有相同的长度,忽略它们内部的内容: #main div { flex:1; } 复制 效果预览 浏览器支持 表格中的数字表示支持该属性的第一个浏览器的版本号. 紧跟 ...
- 信息系统实践手记6-JS调用Flex的性能问题一例
说明:信息系统实践手记系列是系笔者在平时研发中先后遇到的大小的问题,也许朴实和细微,但往往却是经常遇到的问题.笔者对其中比较典型的加以收集,描述,归纳和分享. 摘要:此文描述了笔者接触过的部分信息系统 ...
- [MySQL性能优化系列]巧用索引
1. 普通青年的索引使用方式 假设我们有一个用户表 tb_user,内容如下: name age sex jack 22 男 rose 21 女 tom 20 男 ... ... ... 执行SQL语 ...
- flex自适应高度内容高度超出容器高度自动出现滚动条的问题
在容器中设置 flex-grow:2; overflow-y:auto;overflow-x:hidden;容器高度自适应. 内容高度不固定,无法出现滚动条,然后在容器中添加height:0,出现滚动 ...
- 在移动端中的flex布局
flex布局介绍: flex布局很灵活, 这种布局我们也可以称之为弹性布局, 弹性布局的主要优势就是元素的宽或者高会自动补全; flex布局实例: 比如有两个div,一个div的宽度为100px, ...
随机推荐
- OpenStack Heat模板详解
Heat模板全称为heat orchestration template,简称为HOT. 1 典型Heat模板结构 heat_template_version: 2015-04-30 descript ...
- Kafka Connect Architecture
Kafka Connect's goal of copying data between systems has been tackled by a variety of frameworks, ma ...
- HmacSHA256算法(C# 和 Java)
Java代码: /** * HmacSHA256算法,返回的结果始终是32位 * @param key 加密的键,可以是任何数据 * @param content 待加密的内容 * @return 加 ...
- node.js写巨大的xlsx
一般用node-xlsx写xlsx文件的话局要把数据全部放在内存里面再写到文件里,如果文件很大的话就会导致内存吃不消. 可以使用PySpreadsheet这个npm库,他支持写很大的文件. PySpr ...
- otepad++ 配置 支持jquery、html、css、javascript、php代码提示
官网下载:http://notepad-plus-plus.org/ 获取插件的方法:打开软件,窗口工具栏有有一个问号,点获取插件. 我使用的插件(安装方法都是官方的方法): QuickText.v0 ...
- iOS面试题超全!
之前看了很多面试题,感觉要不是不够就是过于冗余,于是我将网上的一些面试题进行了删减和重排,现在分享给大家.(题目来源于网络,侵删) 1. Object-c的类可以多重继承么?可以实现多个接口么?Cat ...
- 15.Git四种协议-本地协议(local)、HTTP协议、SSH协议、Git协议
1.本地协议(loacl) 最基本的协议,其远程仓库其实就是硬盘内部的一个目录(例如D:\\project).常见于团队内的人对一个共享的文件系统(例如NFS)具有访问权限,或者多人共用一台电脑的情况 ...
- JAVA数据结构和算法 1-综述:数据结构和数据类型
数据结构:指数据在计算机内存空间中或者磁盘中的组织形式. 对于数据结构的操作:插入.删除.查找.迭代遍历.排序等: Java.util包中含有诸如向量(一个可扩充的数组).栈.哈希表等类型的数据结构, ...
- linux SSH 登录
1: 远程连接linux server: ssh -p22 root@192.168.XXX.XXX 然后输入密码. 2: 免密码的方式: A: sudo -i B: ssh-keyge ...
- Flink中API使用详细范例--window
Flink Window机制范例实录: 什么是Window?有哪些用途? 1.window又可以分为基于时间(Time-based)的window 2.基于数量(Count-based)的window ...