两列布局实现各自独立滚屏，类似与 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 ...
随机推荐
- X86逆向1：软件破解入门课【课件下载】
从本节课开始,我将带领小白入门学习软件破解的相关内容,大佬绕过,以后将会定期更新从最基本的破解知识点开始学习,由简单到复杂循序渐进,难度会逐步提高. 为了防止版权方面的争议,我将自行编写一些破解案例来 ...
- NHiberante的优缺点
参考 NHiberante的优缺点 3.1 优点 (1).面向对象:NHiberante的使用时只需要操纵对象,使开发更对象化,抛弃了数据库中心的思想,完全的面向对象思想. (2).透明持久化:带有持 ...
- sp_addlinkedserver 跨服务器连接数据库查询
----创建远程链接服务器--exec sys.sp_addlinkedserver --@server='LMS',--被访问的服务器别名--@srvproduct='',--@provider=' ...
- 编译程序遇到问题 relocation R_X86_64_32 against `.rodata' can not be used when making a shared object;
编译程序遇到问题 relocation R_X86_64_32 against `.rodata' can not be used when making a shared object; 发现编译 ...
- java实现spark常用算子之Sample
import org.apache.spark.SparkConf;import org.apache.spark.api.java.JavaRDD;import org.apache.spark.a ...
- ES6入门二：默认值与默认值表达式
默认值 默认值表达式 需要注意的是,这种默认值和默认表达式在IE的最新版本中仍然没有得到兼容,只能通过编译转码的方式降级到ES5使用. 一.默认值 在函数声明时可以给形参赋默认值,当调用函数时不传入或 ...
- ASP.NET中TextBox控件设立ReadOnly="true"后台取不到值
SP.NET中TextBox控件设置ReadOnly="true"H或Enabled=false后台取不到值 当TextBox设置了ReadOnly="true" ...
- shell中$(( ))、$( )、``与${ }的区别详解
命令替换在bash中,$( )与` `(反引号)都是用来作命令替换的.命令替换与变量替换差不多,都是用来重组命令行的,先完成引号里的命令行,然后将其结果替换出来,再重组成新的命令行 [python@m ...
- deep_learning_Softmax()
该节课中提到了一种叫作softmax的函数,因为之前对这个概念不了解,所以本篇就这个函数进行整理,如下: 维基给出的解释:softmax函数,也称指数归一化函数,它是一种logistic函数的归一化形 ...
- 用Python+Aria2写一个自动选择最优下载方式的E站爬虫
前言 E站爬虫在网上已经有很多了,但多数都只能以图片为单位下载,且偶尔会遇到图片加载失败的情况:熟悉E站的朋友们应该知道,E站许多资源都是有提供BT种子的,而且通常打包的是比默认看图模式更高清的文件: ...