html中

<div class="flexLayoutr">
<div class="div_head"></div>
<div class="div_content">中间区域</div>
<div class="div_foot"></div>
</div>

css中

*{
margin: 0;
padding: 0;
}
.flexLayout{
display: flex;
display: -webkit-flex;
min-height: 100vh;
flex-direction: column;
}
.div_head{
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
width: 100%;
position:absolute;
z-index:5;
top:0;
}
.div_bottom{
width:100%;
position:absolute;
z-index:200;
bottom:0;
}
.div_content{
width:100%;
overflow:auto;
top:6.8rem;
position:absolute;
z-index:10;
bottom:4.6rem;
}

  

vue项目中h5移动端中通过flex布局实现首尾固定,中间滚动(借鉴)的更多相关文章

  1. vue项目如何部署到Tomcat中

    vue项目如何部署到Tomcat中 1,假设你要访问的项目名称为'hms' 2,在Tomcat的webapps下创建hms文件夹, 3,配置config/index.js文件,build: {} 选项 ...

  2. vue 项目使用局域网多端访问并实时自动更新(利用 browser-sync)

    在写vue的项目中时,虽然vue会自动更新页面,但是切换页面切来切去也很麻烦,有时候我们还要在公司另一台电脑或者手机上调试,这时候利用browser-sync插件,无需改动vue的代码即可实现: 1. ...

  3. H5移动端中必备技能

    Meta基础知识: H5页面窗口自动调整到设备宽度,并禁止用户缩放页面<meta name="viewport" content="width=device-wid ...

  4. Vue项目打包发布后CSS中的背景图片不显示

    相信有很多同学在学习vue的刚开始都遇到过项目打包发布后发现CSS中的背景图片不显示,具体如何解决只需要更改bind的配置即可 修改 build/utils.js 中的 generateLoaders ...

  5. vue项目根目录下index.html中的id="app",与src目录下的App.vue中的id="app"为什么不会冲突

    感谢:https://blog.csdn.net/qq_35624642/article/details/78243413 index.html <body> <div id=&qu ...

  6. 如何将Vue项目部署到Nginx 服务器中

    https://blog.csdn.net/qq_35366269/article/details/91385689

  7. 利用HBuilder将vue项目打包成移动端app

    事先准备,开发完成的web app项目(也可以利用vue-cli脚手架构建vue模板项目),npm run dev可以正常预览的项目 1,将项目目录下config文件内index.js中assetsP ...

  8. Python全栈工程师之从网页搭建入门到Flask全栈项目实战(1) - ES6标准入门和Flex布局

    1.简述 1.什么是ES6?ES6, 全称 ECMAScript 6.0,是 JavaScript 的下一个版本标准,2015年6月份发版.ES6的主要目的是为了解决 ES5 的先天不足. 2.了解E ...

  9. Vue项目用于Ios和Android端开发

    起因 前公司商城App项目使用的是H5开发,有微信公众号.Ios和Android三个版本,H5版本是自己写的一套框架,已经用了有些年头了,承载不下不断涌现出的新需求.而Ios和Android端通过we ...

随机推荐

  1. django—ORM相关

    常用的QuerySet方法 1.all() 查询表中所有数据,返回一个QuerySet对象列表 2.filter() 查询满足条件的数据,返回一个QuerySet对象列表 3.get() 查询指定的数 ...

  2. Python基础知识点整理(详细)

    Python知识点整理(详细) 输出函数 print()可以向屏幕打印内容,或者在打开指定文件后,向文件中输入内容 输入函数 input([prompt])[prompt] 为输入的提示字符.该函数返 ...

  3. .Net Core API 发布到IIS后,如何配置SSL详细步骤

    一.首先,我们要将API发布到IIS,不脱机工作.但是这里会有问题,调用接口时,会返回 也就是说,我们需要配置SSL.接下来我们就来详细说明. 二.域名商提供SSL证书审核. 我的域名提供商是腾讯,直 ...

  4. origin添加两个Y轴

    1. 选中X和两个Y 2. 点击Double Y 3. 关掉gap to Symbol,否则Line+Symbol这种显示方式可能显示不出线条 ​

  5. JAVA类库之——Math类(持续更新)

    Math类 目录 Math类 1.Math 类中的常量方法 返回π(圆周率)值的方法:PI 返回E(自然对数低)值的方法:E 2.Math 类中的三角函数方法 计算正弦函数值的方法:Sin(radia ...

  6. Pycharm快捷键与基本使用方法

    pycharm常用快捷键设置 关注公众号"轻松学编程"了解更多. 可在file->settings->keymap中查找关键字然后修改快捷键 1.多行编辑 ALT+鼠标 ...

  7. [BZOJ 4818/LuoguP3702][SDOI2017] 序列计数 (矩阵加速DP)

    题面: 传送门:https://www.lydsy.com/JudgeOnline/problem.php?id=4818 Solution 看到这道题,我们不妨先考虑一下20分怎么搞 想到暴力,本蒟 ...

  8. Union-Find算法详解

    今天讲讲 Union-Find 算法,也就是常说的并查集算法,主要是解决图论中「动态连通性」问题的.名词很高端,其实特别好理解,等会解释,另外这个算法的应用都非常有趣. 说起这个 Union-Find ...

  9. CSS ------ 样式学习 (一)

    CSS 指层叠样式表 (Cascading Style Sheets) :定义如何显示 HTML 元素(一套自定义的衣服) 语法: 由选择器和声明(可以是一条或多条)构成, 声明以大括号({})括起来 ...

  10. Java工程师高薪训练营-第一阶段 开源框架源码解析-模块一 持久层框架涉及实现及MyBatis源码分析-任务一:自定义持久层框架

    目录 任务一:自定义持久层框架 1.1 JDBC回顾及问题分析 1.2 自定义持久层框架思路分析 1.3 IPersistence_Test编写 1.3.1 XXXMapper.xml详解 1.3.2 ...