vue项目中h5移动端中通过flex布局实现首尾固定,中间滚动(借鉴)
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布局实现首尾固定,中间滚动(借鉴)的更多相关文章
- vue项目如何部署到Tomcat中
vue项目如何部署到Tomcat中 1,假设你要访问的项目名称为'hms' 2,在Tomcat的webapps下创建hms文件夹, 3,配置config/index.js文件,build: {} 选项 ...
- vue 项目使用局域网多端访问并实时自动更新(利用 browser-sync)
在写vue的项目中时,虽然vue会自动更新页面,但是切换页面切来切去也很麻烦,有时候我们还要在公司另一台电脑或者手机上调试,这时候利用browser-sync插件,无需改动vue的代码即可实现: 1. ...
- H5移动端中必备技能
Meta基础知识: H5页面窗口自动调整到设备宽度,并禁止用户缩放页面<meta name="viewport" content="width=device-wid ...
- Vue项目打包发布后CSS中的背景图片不显示
相信有很多同学在学习vue的刚开始都遇到过项目打包发布后发现CSS中的背景图片不显示,具体如何解决只需要更改bind的配置即可 修改 build/utils.js 中的 generateLoaders ...
- 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 ...
- 如何将Vue项目部署到Nginx 服务器中
https://blog.csdn.net/qq_35366269/article/details/91385689
- 利用HBuilder将vue项目打包成移动端app
事先准备,开发完成的web app项目(也可以利用vue-cli脚手架构建vue模板项目),npm run dev可以正常预览的项目 1,将项目目录下config文件内index.js中assetsP ...
- Python全栈工程师之从网页搭建入门到Flask全栈项目实战(1) - ES6标准入门和Flex布局
1.简述 1.什么是ES6?ES6, 全称 ECMAScript 6.0,是 JavaScript 的下一个版本标准,2015年6月份发版.ES6的主要目的是为了解决 ES5 的先天不足. 2.了解E ...
- Vue项目用于Ios和Android端开发
起因 前公司商城App项目使用的是H5开发,有微信公众号.Ios和Android三个版本,H5版本是自己写的一套框架,已经用了有些年头了,承载不下不断涌现出的新需求.而Ios和Android端通过we ...
随机推荐
- django—ORM相关
常用的QuerySet方法 1.all() 查询表中所有数据,返回一个QuerySet对象列表 2.filter() 查询满足条件的数据,返回一个QuerySet对象列表 3.get() 查询指定的数 ...
- Python基础知识点整理(详细)
Python知识点整理(详细) 输出函数 print()可以向屏幕打印内容,或者在打开指定文件后,向文件中输入内容 输入函数 input([prompt])[prompt] 为输入的提示字符.该函数返 ...
- .Net Core API 发布到IIS后,如何配置SSL详细步骤
一.首先,我们要将API发布到IIS,不脱机工作.但是这里会有问题,调用接口时,会返回 也就是说,我们需要配置SSL.接下来我们就来详细说明. 二.域名商提供SSL证书审核. 我的域名提供商是腾讯,直 ...
- origin添加两个Y轴
1. 选中X和两个Y 2. 点击Double Y 3. 关掉gap to Symbol,否则Line+Symbol这种显示方式可能显示不出线条
- JAVA类库之——Math类(持续更新)
Math类 目录 Math类 1.Math 类中的常量方法 返回π(圆周率)值的方法:PI 返回E(自然对数低)值的方法:E 2.Math 类中的三角函数方法 计算正弦函数值的方法:Sin(radia ...
- Pycharm快捷键与基本使用方法
pycharm常用快捷键设置 关注公众号"轻松学编程"了解更多. 可在file->settings->keymap中查找关键字然后修改快捷键 1.多行编辑 ALT+鼠标 ...
- [BZOJ 4818/LuoguP3702][SDOI2017] 序列计数 (矩阵加速DP)
题面: 传送门:https://www.lydsy.com/JudgeOnline/problem.php?id=4818 Solution 看到这道题,我们不妨先考虑一下20分怎么搞 想到暴力,本蒟 ...
- Union-Find算法详解
今天讲讲 Union-Find 算法,也就是常说的并查集算法,主要是解决图论中「动态连通性」问题的.名词很高端,其实特别好理解,等会解释,另外这个算法的应用都非常有趣. 说起这个 Union-Find ...
- CSS ------ 样式学习 (一)
CSS 指层叠样式表 (Cascading Style Sheets) :定义如何显示 HTML 元素(一套自定义的衣服) 语法: 由选择器和声明(可以是一条或多条)构成, 声明以大括号({})括起来 ...
- Java工程师高薪训练营-第一阶段 开源框架源码解析-模块一 持久层框架涉及实现及MyBatis源码分析-任务一:自定义持久层框架
目录 任务一:自定义持久层框架 1.1 JDBC回顾及问题分析 1.2 自定义持久层框架思路分析 1.3 IPersistence_Test编写 1.3.1 XXXMapper.xml详解 1.3.2 ...