两列布局实现各自独立滚屏，类似与 scrollNav 的功能。
现在移动端 web 开发越来越靠近 app 的功能。所以两列布局各自都能实现独立滚动也常见。基于固定侧边栏导航，另一侧实现内容展示。
这个功能的核心在于使用 vh 单位。
其中 CSS 的代码是核心点，代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style media="screen">
.wrapper {
display: flex;
width: 100%;
}
.left, .right {
width: 50%;
height: 100vh;
overflow: auto;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="left">
<div>第一列</div>
<div>第一列</div>
<div>第一列</div>
<div>第一列</div>
<div>第一列</div>
<div>第一列</div>
<div>第一列</div>
<div>第一列</div>
<div>第一列</div>
<div>第一列</div>
<div>第一列</div>
<div>第一列</div>
<div>第一列</div>
<div>第一列</div>
<div>第一列</div>
<div>第一列</div>
<div>第一列</div>
<div>第一列</div>
<div>第一列</div>
<div>第一列</div>
<div>第一列</div>
<div>第一列</div>
<div>第一列</div>
<div>第一列</div>
<div>第一列</div>
<div>第一列</div>
<div>第一列</div>
<div>第一列</div>
<div>第一列</div>
<div>第一列</div>
<div>第一列</div>
<div>第一列</div>
<div>第一列</div>
<div>第一列</div>
<div>第一列</div>
<div>第一列</div>
<div>第一列</div>
<div>第一列</div>
<div>第一列</div>
<div>第一列</div>
<div>第一列</div>
<div>第一列</div>
<div>第一列</div>
<div>第一列</div>
<div>第一列</div>
<div>第一列</div>
<div>第一列</div>
<div>第一列</div>
<div>第一列</div>
<div>第一列</div>
<div>第一列</div>
<div>第一列</div>
<div>第一列</div>
<div>第一列</div>
<div>第一列</div>
<div>第一列</div>
<div>第一列</div>
<div>第一列</div>
<div>第一列</div>
<div>第一列</div>
<div>第一列</div>
<div>第一列</div>
<div>第一列</div>
<div>第一列</div>
<div>第一列</div>
<div>第一列</div>
<div>第一列</div>
<div>第一列</div>
<div>第一列</div>
<div>第一列</div>
<div>第一列</div>
<div>第一列</div>
</div>
<div class="right">
<div>第二列</div>
<div>第二列</div>
<div>第二列</div>
<div>第二列</div>
<div>第二列</div>
<div>第二列</div>
<div>第二列</div>
<div>第二列</div>
<div>第二列</div>
<div>第二列</div>
<div>第二列</div>
<div>第二列</div>
<div>第二列</div>
<div>第二列</div>
<div>第二列</div>
<div>第二列</div>
<div>第二列</div>
<div>第二列</div>
<div>第二列</div>
<div>第二列</div>
<div>第二列</div>
<div>第二列</div>
<div>第二列</div>
<div>第二列</div>
<div>第二列</div>
<div>第二列</div>
<div>第二列</div>
<div>第二列</div>
<div>第二列</div>
<div>第二列</div>
<div>第二列</div>
<div>第二列</div>
<div>第二列</div>
<div>第二列</div>
<div>第二列</div>
<div>第二列</div>
<div>第二列</div>
<div>第二列</div>
<div>第二列</div>
<div>第二列</div>
<div>第二列</div>
<div>第二列</div>
<div>第二列</div>
<div>第二列</div>
<div>第二列</div>
<div>第二列</div>
<div>第二列</div>
<div>第二列</div>
<div>第二列</div>
<div>第二列</div>
<div>第二列</div>
<div>第二列</div>
<div>第二列</div>
<div>第二列</div>
<div>第二列</div>
<div>第二列</div>
<div>第二列</div>
<div>第二列</div>
<div>第二列</div>
<div>第二列</div>
<div>第二列</div>
<div>第二列</div>
<div>第二列</div>
<div>第二列</div>
<div>第二列</div>
<div>第二列</div>
<div>第二列</div>
<div>第二列</div>
<div>第二列</div>
<div>第二列</div>
<div>第二列</div>
<div>第二列</div>
<div>第二列</div>
<div>第二列</div>
<div>第二列</div>
<div>第二列</div>
<div>第二列</div>
<div>第二列</div>
<div>第二列</div>
<div>第二列</div>
<div>第二列</div>
</div>
<div>
</body>
</html>
两列布局实现各自独立滚屏，类似与 scrollNav 的功能。的更多相关文章
- 3种常见的CSS页面布局--双飞翼布局、粘连布局、左右两列布局
一.左右两列布局 1.代码如下,可先粘贴复制,自行运行 <!DOCTYPE html><html> <head> <meta charset="UT ...
- bootstrap的栅格布局与两列布局结合使用
在工作中我们常常需要实现响应式布局,这个可以使用bootstrap的栅格系统来实现,我们在列里也需要实现一部分的响应式.比如下面的效果图,需要实现左边图标固定,右边的自适应 : 左边固定宽度,右边自适 ...
- css之页面两列布局
两列布局:左边固定,后边自适应 第一种方法:左边的div左浮动或者是绝对定位,右边的div加margin-left:左边div的宽度 html部分 <div class="left&q ...
- css布局之两列布局
我们见过两列布局的网站也很多,不过这种两列布局的分为两种:自适应和固定宽度 1.自适应两列布局 <!DOCTYPE html> <html lang="en"&g ...
- CSS布局——横向两列布局
1.固定两栏布局,使用float,注意对紧邻元素清除浮动影响.IE6在使用float布局同时设置横行margin的情况下会有双边距BUG,解决方案是加入_display:inline 代码如下: &l ...
- DIV+CSS 网页布局之：两列布局
1.宽度自适应两列布局 两列布局可以使用浮动来完成,左列设置左浮动,右列设置右浮动,这样就省的再设置外边距了. 当元素使用了浮动之后,会对周围的元素造成影响,那么就需要清除浮动,通常使用两种方法.可以 ...
- css两列布局，一边固定宽度，另一边自适应
<!DOCTYPE HTML><HTML> <head> <meta charset="utf-8" ...
- 两列布局，读《css那些事儿》
两列布局: 1.两列定宽: 要点:float.width固定. :after清除浮动. 前提:两列的盒模型宽度相加不能大于父元素的宽度,否则会出现错位现象. <!DOCTYPE html> ...
- css常见的各种布局上（两列布局）
常见的布局上(两列布局) 1.常见的两列布局 1.1左边固定,右边自适应,左边宽度已知,右边默认占满整行,使用left 左浮动,右边不浮动,设置margin-left:左侧宽度 <style&g ...
随机推荐
- 向量运算（lua，三维） 点乘、叉乘、模、夹角
向量运算在游戏制作中经常用到,稍微总结一下. 一.点乘 如图,假设 向量a与b的点乘表示a在b上的投影与b的模的乘积 公式: 代码: function MathHelper.GetVector3D ...
- 【原创】大叔经验分享（59）kudu查看table size
kudu并没有命令可以直接查看每个table占用的空间,可以从cloudera manager上间接查看 CM is scrapping and aggregating the /metrics pa ...
- 【weixin】微信支付---PC网站微信支付
一.PC网站支付 微信支付支持完成域名ICP备案的网站接入支付功能.PC网站接入支付后,可以通过JSAPI支付或Native支付,自行开发生成二维码,用户使用微信“扫一扫”来完成支付. 二.支付产品介 ...
- python 使用pymssql连接sql server数据库（转）
import pymssql class MSSQL: """ 对pymssql的简单封装 pymssql库,该库到这里下载:http://www.lf ...
- void in javascript是一个指定要计算表达式但不返回值的运算符
void in javascript是一个指定要计算表达式但不返回值的运算符.void运算符使用格式如下:1.javascript:void(表达式)2.javascript:void表达式表达式是要 ...
- Linux系统介绍及部署
Linux系统介绍及部署1.常见操作系统 windows.Linux(类unix系统).Android.iOS.unix(HP UNIX)2.操作系统构成 外壳(shell)+驱动+内核3.常见Lin ...
- SmartBinding与kbmMW＃2
前言 在之前的文章中,我介绍了SmartBinding作为Delphi的一个新的易于使用和智能的绑定框架.介绍了包括绑定对象,列表,常规数据和可视控件,以及如何使用导航器,所有这些都用代码做了演示. ...
- Linux根文件系统和目录结构及bash特性2
Linux系统上的文件类型: -:常规文件,即f d:directory,目录文件 b:block device,块设备文件,支持以“block”为单位进行随机访问 c:cha ...
- Vim生存技能
Vim生存技能 必备: 写模式: i,a,o 退出写模式: ecs 快捷: Ctrl+u: 向文件首翻半屏 Ctrl+d: 向文件尾翻半屏 Ctrl+f: 向文件尾翻一屏 Ct ...
- Django 中 cookie的使用
Cookie是浏览器在客户端留下的一段记录,这段记录可以保留在内存或者硬盘上.因为Http请求是无状态的,通过读取cookie的记录,服务器或者客户端可以维持会话中的状态.比如一个常见的应用场景就是登 ...