仿淘宝使用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了,源码也上传到源码天堂那里了,大家可以看一下吧,该应用实现了我们常用的购物功能了,也就是在手机上进行网购的流程的,如查看产品(浏 ...
随机推荐
- nginx自动切割日志脚本
#!/bin/bash savepath_log='/data/logs' nglogs='/data/logs' mkdir -p $savepath_log/$(date +%Y)/$(date ...
- Delphi QueryPerformanceCounter、QueryPerformanceFrequency函数，精确定时到ns
var t1,t2:int64; r1,r2,r3:double; begin QueryPerformanceFrequency(c1);//WINDOWS API 返回计数频率 (Intel86: ...
- Dart编程实例 - 类型测试操作符is
Dart编程实例 - 类型测试操作符is void main() { int n = 2; print(n is int); } 本文转自:http://codingdict.com/article/ ...
- Kubernetes 弹性伸缩HPA功能增强Advanced Horizontal Pod Autoscaler -介绍部署篇
背景 WHAT(做什么) Advanced Horizontal Pod Autoscaler(简称:AHPA)是kubernetes中HPA的功能增强. 在兼容原生HPA功能基础上,增加预测.执行模 ...
- Qt第三方库QCustomPlot——QCustomPlot解读
这个小部件类,对于QCustomPlot的所有方面都有所体现 下面阅读它的函数: 函数组织顺序为: 基本设置---添加图线---删除图线---添加额外Item---层次管理---坐标轴管理----导出 ...
- DGIM算法
/***************************************************** copyright (C), 2014-2015, Lighting Studio. Co ...
- 文件下载java代码
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletExcepti ...
- jmter 二次开发 IDEA 项目5.1
jmter 二次开发 IDEA 项目5.1 IDEA 编译 Jmeter 5.0(二次开发) 1. Java环境配置 1.1 步骤1 1.2 步骤2 1.3 步骤3 1.4 ...
- GDB结合Bochs调试内核
1. 编译内核 编辑.config文件,相关项目改成如下形式: 1: CONFIG_KGDB=y 2: CONFIG_KGDB_SERIAL_CONSOLE=y 3: CONFIG_MAGIC_SYS ...
- 寻找cookie之旅
公司接口自动化,需要用到cookie.这个cookie可以从login的响应header中取到. 直接用python调这个接口,返回的响应header是这个: {'Date': 'Thu, 15 Au ...