仿淘宝使用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了,源码也上传到源码天堂那里了,大家可以看一下吧,该应用实现了我们常用的购物功能了,也就是在手机上进行网购的流程的,如查看产品(浏 ...
随机推荐
- png图标任意赋色
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 【LeetCode 17】电话号码的字母组合
题目链接 [题解] 用回溯法搞一下. 一搞就有~ 注意输入空串的时候别返回那个空串.. [代码] class Solution { public: string dic[10]; vector< ...
- cgroup & oom-killer 简介
cgroup内存限制 memory.failcnt memory.limit_in_bytes memory.usage_in_bytes memory.max_usage_in_bytes memo ...
- 三：robotframework框架配合selenium之jquery定位
RF框架我用的比较多,限于自己的代码水平,目前工作中一直是用RF框架.unittest框架,我也练习了很久,还差一点封装的技巧与设计模式的学习.所以不敢在项目中实践. 等明年我的代码水平再上升一个台阶 ...
- 我看Spring MVC系列（一）
1.Spring MVC是什么: Spring MVC:Spring框架提供了构建Web应用程序的全功能MVC模块. 2.Spring helloWorld应用(基于Spring 4.2) 1.添加S ...
- 修改 Chrome浏览器主页被劫持 chrome 主页被篡改成hao.qquu8.com的解决方案
1. 开始菜单输入‘g'找到 Google Chrome浏览器 2. 修改属性->目标,将 chrome.exe hao.qquu8.com 后面的网址去掉,如图:
- 分析由Python编写的大型项目(Volatility和Cuckoo)
之前使用python都是用来做一些简单的脚本,本质上和bat批处理文件没有区别. 但是Python是可以用来编写大型的项目的,比如: Volatility:https://code.google.co ...
- org.apache.ibatis.builder.IncompleteElementException: Could not find result map com.abc.beans.Minister
使用mybatis进行一对多嵌套查询时出错,错误原因: <select id="findMinisterById" resultMap="com.abc.beans ...
- 0620 ALT选择竖排 虚函数的优缺点 浅拷贝深拷贝 操作系统
1.word按住ALT可以选择整列文字 2.虚函数优点:http://blog.163.com/jianhuali0118@126/blog/static/3774997020083610434091 ...
- Linux 下通过mail命令发送邮件
mail -s "测试" 1968089885@foxmail.com 需要先配置smtp服务器