仿淘宝使用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了,源码也上传到源码天堂那里了,大家可以看一下吧,该应用实现了我们常用的购物功能了,也就是在手机上进行网购的流程的,如查看产品(浏 ...
随机推荐
- python操作pymysql
#_author:来童星#date:2019/12/19import pymysql#1.打开数据库连接db=pymysql.connect('localhost','root','root','te ...
- jQuery的属性、遍历和HTML操作
一.属性操作 1..attr()与.removeAttr() 每个元素都有一个或者多个特性,这些特性的用途就是给出相应元素或者其内容的附加信息.如:在img元素中,src就是元素的特性,用来标记图 ...
- Thymeleaf 模板布局三种区别
- [NOI2016]区间 题解(决策单调性+线段树优化)
4653: [Noi2016]区间 Time Limit: 60 Sec Memory Limit: 256 MBSubmit: 1593 Solved: 869[Submit][Status][ ...
- 2019 wannafly winter camp day5-8代码库
目录 day5 5H div2 Nested Tree (树形dp) 5F div2 Kropki (状压dp) 5J div1 Special Judge (计算几何) 5I div1 Sortin ...
- Python中练习题关于内置函数的getattr，setattr问题
执行一下代码的结果是? class A: def __init__(self,a,b,c): self.x = a+b+c a = A(1,2,3) b = getattr(a,'x') setatt ...
- 关于“Unknown or unsupported command 'install'”问题解决的小结
经常需要在COMMAND命令中安装第三方库,有时会碰到“Unknown or unsupported command 'install'”这种报错. 刚开始时,以为是环境变量里面没有配置:PYTHON ...
- SQL生成 C# Model
本文转自: https://www.cnblogs.com/jhli/p/11552105.html declare @TableName sysname = 'T_FakeOrderList' de ...
- 探索C++的秘密之详解extern
转载:http://developer.51cto.com/art/200704/46843.htm C和C++对函数的处理方式是不同的.extern "C"是使C++能够调用C写 ...
- linux 查看cpu，memory
https://www.cnblogs.com/ctypyb2002/p/9792951.html