现在移动端 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 的功能。的更多相关文章

  1. 3种常见的CSS页面布局--双飞翼布局、粘连布局、左右两列布局

    一.左右两列布局 1.代码如下,可先粘贴复制,自行运行 <!DOCTYPE html><html> <head> <meta charset="UT ...

  2. bootstrap的栅格布局与两列布局结合使用

    在工作中我们常常需要实现响应式布局,这个可以使用bootstrap的栅格系统来实现,我们在列里也需要实现一部分的响应式.比如下面的效果图,需要实现左边图标固定,右边的自适应 : 左边固定宽度,右边自适 ...

  3. css之页面两列布局

    两列布局:左边固定,后边自适应 第一种方法:左边的div左浮动或者是绝对定位,右边的div加margin-left:左边div的宽度 html部分 <div class="left&q ...

  4. css布局之两列布局

    我们见过两列布局的网站也很多,不过这种两列布局的分为两种:自适应和固定宽度 1.自适应两列布局 <!DOCTYPE html> <html lang="en"&g ...

  5. CSS布局——横向两列布局

    1.固定两栏布局,使用float,注意对紧邻元素清除浮动影响.IE6在使用float布局同时设置横行margin的情况下会有双边距BUG,解决方案是加入_display:inline 代码如下: &l ...

  6. DIV+CSS 网页布局之：两列布局

    1.宽度自适应两列布局 两列布局可以使用浮动来完成,左列设置左浮动,右列设置右浮动,这样就省的再设置外边距了. 当元素使用了浮动之后,会对周围的元素造成影响,那么就需要清除浮动,通常使用两种方法.可以 ...

  7. css两列布局，一边固定宽度，另一边自适应

    <!DOCTYPE HTML><HTML>    <head>                <meta charset="utf-8" ...

  8. 两列布局，读《css那些事儿》

    两列布局: 1.两列定宽: 要点:float.width固定. :after清除浮动. 前提:两列的盒模型宽度相加不能大于父元素的宽度,否则会出现错位现象. <!DOCTYPE html> ...

  9. css常见的各种布局上（两列布局）

    常见的布局上(两列布局) 1.常见的两列布局 1.1左边固定,右边自适应,左边宽度已知,右边默认占满整行,使用left 左浮动,右边不浮动,设置margin-left:左侧宽度 <style&g ...

随机推荐

  1. Codeforces 1239C. Queue in the Train

    传送门 事实上就是模拟 搞一个优先队列维护一下事件结构体:时间,人的编号,入队还是出队 再维护两个 $set$ ,队列内的人 $inQueue$ ,想要进入队列内的人 $want$ 然后模拟模拟模拟! ...

  2. Java 反射理解（三）-- Java获取方法信息

    Java 反射理解(三)-- Java获取方法信息 基本的数据类型.void关键字,都存在类类型. 举例如下: public class ClassDemo2 { public static void ...

  3. 19-Perl 特殊变量

    1.Perl 特殊变量Perl 语言中定义了一些特殊的变量,通常以 $, @, 或 % 作为前缀,例如:$_.很多特殊的变量有一个很长的英文名,操作系统变量 $! 可以写为 $OS_ERROR.如果你 ...

  4. Dev-C++的一些使用技巧快捷键

    最近开始用Dev-C++在Window下编程,感觉Dec-C++是一款挺不错的C++编译器.下载地址http://www.duote.com/soft/9830.html .现总结一些使用技巧: 1. ...

  5. Windows10出现打开EXE应用程序错误

    运行部分EXE文件,弹出错误“该文件没有与之关联的程序来执行该操作 右键开始菜单, PowerShell(管理员)  也是一样 连安装程序Vs2017都无法启动,用了多种方法都不能搞定. 花了不少时间 ...

  6. UVA571Jugs题解--简单数论(其实是瞎搞)

    题目链接 https://cn.vjudge.net/problem/UVA-571 分析 刚做了道倒水问题的题想看看能不能水二倍经验,结果发现了这道题 题意翻译:https://www.cnblog ...

  7. mqtt协议实现 java服务端推送功能（二）java demo测试

    上一篇写了安装mosQuitto和测试,但是用cmd命令很麻烦,有没有一个可视化软件呢? 有,需要在google浏览器下载一个叫MQTTLens的插件 打开MQTTLens后界面如下: 打开conne ...

  8. 【Git的基本操作六】分支管理

    分支管理 1. 什么是分支? 在版本控制过程中,使用对条线同时推进多个任务. 2. 分支的好处 同时并行推进多个功能开发,提高开发效率 各个分支在开发过程中,如果某一个分支开发失败,不会对其他分支有任 ...

  9. 关于c语言的文法分析问题

    <程序>  ->   <声明> | <程序> <函数> <声明>  ->   #include<stdio.h>|# ...

  10. SpringBoot设置首页(默认页)跳转

    SpringBoot设置首页(默认页)跳转 方案1:controller里添加一个"/"的映射路径 @RequestMapping("/")public Str ...