两列布局实现各自独立滚屏，类似与 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 ...
随机推荐
- go 表单
package main import ( "fmt" "io" "net/http" ) const form = `<html&g ...
- pat l2-14 列车调度 dilworth+nlog(n)最长上升子序列
关于dilworth定理 这里引用一个大神的(http://blog.csdn.net/xuzengqiang/article/details/7266034) 偏序的概念: 设A是一个非空集,P是A ...
- Fullscreen API：全屏操作
function launchFullscreen(element) { if(element.requestFullscreen) { element.requestFullscreen(); } ...
- ModbusRtu通信报文详解【二】
这里接着上一篇内容对ModbusRtu的通信报文做个详细描述: [1]强制单个线圈 功能码:05H [2]预置单个寄存器 功能码:06H [3]强制多个线圈 功能码;0FH [4]预置多个寄存器 功能 ...
- ef core schema 指定架构
不知道很少使用Schema模型还是怎么,居然搜帖子没人说,虽然很简单但是还是想记录一下坑 命名空间 using System.ComponentModel.DataAnnotations.Schema ...
- JS基础_代码块
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- BZOJ4241历史研究题解--回滚莫队
题目链接 https://www.lydsy.com/JudgeOnline/problem.php?id=4241 分析 这题就是求区间权值乘以权值出现次数的最大值,一看莫队法块可搞,但仔细想想,莫 ...
- mqtt协议实现 java服务端推送功能（三）项目中给多个用户推送功能
接着上一篇说,上一篇的TOPIC是写死的,然而在实际项目中要给不同用户 也就是不同的topic进行推送 所以要写活 package com.fh.controller.information.push ...
- Python实现读取Excel文档中的配置并下载软件包
问题:现在遇到这样一个问题,服务器存储了很多软件包,这些包输入不同的产品,每个产品都有自己的配置,互相交叉,那么到底某一产品所有配置的软件包下载后,占用多大空间呢? 分析:从这个问题入手,了解到:软件 ...
- jdk中集成的jre和单独安装的jre有什么区别?
jdk 和 jre 是什么? 有什么区别? jre Jre 是java runtime environment, 是java程序的运行环境.既然是运行,当然要包含jvm,也就是大家熟悉的虚拟机啦,还有 ...