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 ...
随机推荐
- 学python,大概要多久?
都让开!本人文科生,自学Python 2年半,作为一个曾经完全0基础,啥都不懂纯靠自学学会python的文科生,有一些不成熟的小建议可以分享一下. 首先不要觉着编程难,只要你认识26个英文字母,有一点 ...
- 微服务调用之feign负载均衡及服务降级
一,负载均衡: feign已经集成了ribbon,将service1,service2在不同端口启动多个实例可以自动负载均衡 idea: application.yml中server.port: ${ ...
- 微信小程序picker组件两列关联使用方式
在使用微信小程序picker组件时候,可以设置属性 mode = multiSelector 意为多列选择,关联选择,当第一列发生改变时侯,第二列甚至第三列发生相应的改变.但是官方文档上给的只 ...
- for循环使用体会
最近在看源码的时候看到了以下代码: Class[] var2 = componentClasses; int var3 = componentClasses.length; for(int var4 ...
- 云计算管理平台之OpenStack计算服务nova
一.nova简介 nova是openstack中的计算服务,其主要作用是帮助我们在计算节点上管理虚拟机的核心服务:这里的计算节点就是指用于提供运行虚拟机实例的主机,通常像这种计算节点有很多台,那么虚拟 ...
- 20200725_java爬虫_项目创建及log4j配置
0. 摘要 0.1 添加log4j依赖 <dependency> <groupId>org.slf4j</groupId> <artifactId>sl ...
- day80:luffy:短信sdk接入&点击获取验证码&注册功能的实现&Celery实现短信发送功能
目录 1.短信sdk接入 2.前端点击获取验证码效果 3.注册后端接口实现 4.注册-前端 5.Celery 6.Celery完成短信发送功能 1.短信sdk接入 1.准备工作 1.下载云通讯相关的文 ...
- Union-Find算法应用
上篇文章很多读者对于 Union-Find 算法的应用表示很感兴趣,这篇文章就拿几道 LeetCode 题目来讲讲这个算法的巧妙用法. 首先,复习一下,Union-Find 算法解决的是图的动态连通性 ...
- 已经编译安装的nginx/tenginx编译增加新模块
只适用于自行编译安装的nginx配置 业务变更带来的Nginx增加模块需求 由于业务从php转为go开发,需要用到Http2的协议.这种协议在Nginx上需要http_v2_module这个模块的支持 ...
- SQL SERVER数据库常用命令
创建数据库: 命令:create database 数据库名: 示例:create database student: 删除数据库: 命令:drop database 数据库名: 示例:drop da ...