仿淘宝使用flex布局实现页面顶部和底部的固定布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
<style>
body,html{
margin: 0;
padding: 0;
width: 100%;
height: 100%;
font-size: 14px;
}
.HolyGrail {
display: -webkit-flex;
display: flex;
min-height: 100px;
flex-direction: column;
} header,
footer {
text-align: center;
/* flex: 1;设置为1则顶体尾平分body */
height: 50px;
background: #ccc;
} .HolyGrail-body {
display: -webkit-flex;
display: flex;
flex: 1;
} .HolyGrail-content {
flex: 1;
background: pink;
} .HolyGrail-nav, .HolyGrail-ads {
/* 两个边栏的宽度不放大也不缩小设为固定2em */
flex: 0 0 2em;
} .HolyGrail-nav {
/* 导航放到最左边 */
order: -1;
}
/* @media (max-width: 768px) {
.HolyGrail-body {
flex-direction: column;
flex: 1;
}
.HolyGrail-nav,
.HolyGrail-ads,
.HolyGrail-content {
flex: auto;
}
} */
.Site {
display: -webkit-flex;
display: flex;
min-height: 100vh;/*1vh表示浏览器高度的1%，100vh为浏览器高度，感觉这个挺好的*/
/* min-height: 100%;另一种写法 */
flex-direction: column;
} .Site-content {
flex: 1;
overflow-y: scroll;
background: #0099ff;
}
</style>
</head>
<body class="Site">
<header>爱淘宝</header>
<div class="HolyGrail-body Site-content">
<main class="HolyGrail-content" style="height: 1000px;">...</main>
<nav class="HolyGrail-nav">...</nav>
<aside class="HolyGrail-ads">...</aside>
</div>
<footer>淘宝底部</footer>
</body>
</html>
以前一直使用position为fixed来固定元素，发现很难处理内容的高度，参考了淘宝的布局感觉这种解决方法实在好用。附上淘宝网页链接https://m.taobao.com/#index
仿淘宝使用flex布局实现页面顶部和底部的固定布局的更多相关文章
- 转：：iOS 仿淘宝,上拉进入详情页面
今天做的主要是一个模仿淘宝,上拉进入商品详情的功能,主要是通过 tableView 与 webView 一起来实现的,当然也可根据自己的需要把 webView 替换成你想要的 // // ViewCo ...
- 基于Bootstrap仿淘宝分页控件实现
.header { cursor: pointer } p { margin: 3px 6px } th { background: lightblue; width: 20% } table { t ...
- Android中仿淘宝首页顶部滚动自定义HorizontalScrollView定时水平自动切换图片
Android中仿淘宝首页顶部滚动自定义HorizontalScrollView定时水平自动切换图片 自定义ADPager 自定义水平滚动的ScrollView效仿ViewPager 当遇到要在Vie ...
- 高仿淘宝和聚美优品商城详情页实现《IT蓝豹》
高仿淘宝和聚美优品商城详情页实现 android-vertical-slide-view高仿淘宝和聚美优品商城详情页实现,在商品详情页,向上拖动时,可以加载下一页. 使用ViewDragHelper, ...
- JS仿淘宝详情页菜单条智能定位效果
类似于淘宝详情页菜单条智能定位 对于每个人来说并不陌生!如下截图所示:红色框的那部分! 基本原理: 是用JS侦听滚动事件,当页面的滚动距离(页面滚动的高度)大于或者等于 "对象"( ...
- Android仿淘宝头条滚动广告条
之前我使用TextView+Handler+动画,实现了一个简单的仿淘宝广告条的滚动,https://download.csdn.net/download/qq_35605213/9660825: 无 ...
- JavaScript仿淘宝实现放大镜效果的实例
我们都知道放大镜效果一般都是用于一些商城中的,列如每当我们打开淘宝,天猫等pc端时,看到心仪的物品时,点击图片时,便呈现出放大镜的效果.在没有去理解分析它的原理时,感觉非常的神奇,当真正地去接触,也是 ...
- jquery仿淘宝规格颜色选择效果
jquery实现的仿淘宝规格颜色选择效果源代码如下 jquery仿淘宝规格颜色选择效果 -收缩HTML代码 运行代码 [如果运行无效果,请自行将源代码保存为html文件运行] <script t ...
- android版高仿淘宝客户端源码V2.3
android版高仿淘宝客户端源码V2.3,这个版本我已经更新到2.3了,源码也上传到源码天堂那里了,大家可以看一下吧,该应用实现了我们常用的购物功能了,也就是在手机上进行网购的流程的,如查看产品(浏 ...
随机推荐
- Qt:代码里存在中文时带来的问题
一.报错: 常量中有换行符 方法1: 把文本文件转化为unicode或者utf-8, 同是还要带上QString::fromLocal8Bit() 还有其他方法,感觉不靠谱 二.显示异常:乱码 QSt ...
- 非关系型数据库MongoDB入门
本文分为以下四块简单介绍非关系型数据库MongoDB:1.MongoDB简介.2.MongoDB和关系数据库对比.3.MongoDB基本概念.4.mongo shell的使用以及对MongoDB的增删 ...
- Cesium导出PDF
首先安装 html2Canvas 和 jspdf npm i html2Canvas - S npm i jspdf - S 然后在vue页面引入 import html2Canvas from 'h ...
- div框，左右拖动
<script type="text/javascript"> function bindResize(el){ //初始化参数 var els = document. ...
- JMeter4.0 IF Controller
推荐使用 __jexl3 函数生成 if controller判断条件 举个栗子: 1. 假如条件为 "${demo}" == "test" 2. 在If Co ...
- java poi导出Excel合并单元格并设置边框
import org.apache.poi.hssf.usermodel.HSSFCell; import org.apache.poi.hssf.usermodel.HSSFCellStyle; i ...
- Django项目：CRM(客户关系管理系统)--84--74PerfectCRM实现CRM权限和权限组限制访问URL
#models.py # ————————01PerfectCRM基本配置ADMIN———————— from django.db import models # Create your models ...
- idea 中使用dataBase插件
最近一段时间重新开始学习Java 使用IntelliJ 发现有个链接数据库插件挺好用的,并且反应速度还挺快的记录下. 点击步骤:View → Tool Windows → data 进行数据库链接 发 ...
- Guava环境设置
Guava本地环境设置 这部分指导如何下载和设置Java在机器上.请按照以下步骤来设置环境. Java SE免费提供链接:下载Java.所以,根据操作系统下载对应版本. 按照说明下载java和运行.e ...
- Haproxy 基础详解及动静分离配置
haproxy 介绍 1 工作在ISO 七层 根据http协议(或者工作在ISO四层 根据tcp协议) 提供web服务的负载均衡调度器 负载均衡调度器分类 工作在四层: # lvs 工作在七层: # ...