现在移动端 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. 并不对劲的bzoj4945:loj2305:uoj317:p3825[NOI2017]游戏

    题目大意 2-SAT,其中有\(d\)(\(d\leq 8\))个点是\(3-SAT\). 题解 枚举\(d\)个点不取三个中(假设三个为\(a,b,c\))的哪一个,然后整体变成做\(2-SAT\) ...

  2. 牛客 132C 简单瞎搞题 (bitset)

    大意: 给定序列$a$的第$i$个元素的取值范围$[L_i,R_i]$, 求$a$的平方和的种类数. 用bitset优化, 复杂度$O(\frac{n^5}{\omega})$ #include &l ...

  3. SQLServer 导入大容量sql文件

    cmd命令行,管理员身份运行 执行以下语句:E:\dbbak\abhs\SmartEnglish_data.sql 为文件路径,AbhsEnglish 为要导入的数据库 sqlcmd -i E:\db ...

  4. C#键盘事件

    一: protected override void OnKeyDown(KeyEventArgs e) { if (e.Key==Key.Enter) { sendAppToServer(); } ...

  5. 反射获取config实体类属性并赋值

    /// <summary> /// 将实体类存入config /// </summary> /// <param name="enity">&l ...

  6. 二、maven学习

    maven工程运行环境修改 例如maven自带Tomcat6,我们想使用Tomcat7 pom.xml #配置多一个Tomcat7<plugins> <plugin> < ...

  7. Hadoop 3相对于hadoop 2的新特性

    相对于之前主要生产发布版本Hadoop 2,Apache Hadoop 3整合许多重要的增强功能. Hadoop 3是一个可用版本,提供了稳定性和高质量的API,可以用于实际的产品开发.下面简要介绍一 ...

  8. js之数据类型（原始类型）

    JavaScript的数据类型分为两类:原始类型和对象类型.本文讨论的是原始类型.原始类型包括数字,字符串,和布尔值.但在JavaScript中有两个特殊的原始值null(空)和undefined(未 ...

  9. jboss日志的自定义

    最近由于想着每次调试socket接收数据情况都需要源码debug好麻烦,要是能把接收到的数据输出到一个单独的日志文件,那出问题的时候,查看问题就方便多了. log4j的日志是可以很方便自定义的,只是这 ...

  10. Nginx如何配置防盗链

    配置要点 none : 允许没有http_refer的请求访问资源: blocked : 允许不是http://开头的,不带协议的请求访问资源: 119.28.190.215 start.igrow. ...