<!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布局实现页面顶部和底部的固定布局的更多相关文章

  1. 转：：iOS 仿淘宝,上拉进入详情页面

    今天做的主要是一个模仿淘宝,上拉进入商品详情的功能,主要是通过 tableView 与 webView 一起来实现的,当然也可根据自己的需要把 webView 替换成你想要的 // // ViewCo ...

  2. 基于Bootstrap仿淘宝分页控件实现

    .header { cursor: pointer } p { margin: 3px 6px } th { background: lightblue; width: 20% } table { t ...

  3. Android中仿淘宝首页顶部滚动自定义HorizontalScrollView定时水平自动切换图片

    Android中仿淘宝首页顶部滚动自定义HorizontalScrollView定时水平自动切换图片 自定义ADPager 自定义水平滚动的ScrollView效仿ViewPager 当遇到要在Vie ...

  4. 高仿淘宝和聚美优品商城详情页实现《IT蓝豹》

    高仿淘宝和聚美优品商城详情页实现 android-vertical-slide-view高仿淘宝和聚美优品商城详情页实现,在商品详情页,向上拖动时,可以加载下一页. 使用ViewDragHelper, ...

  5. JS仿淘宝详情页菜单条智能定位效果

    类似于淘宝详情页菜单条智能定位 对于每个人来说并不陌生!如下截图所示:红色框的那部分! 基本原理: 是用JS侦听滚动事件,当页面的滚动距离(页面滚动的高度)大于或者等于 "对象"( ...

  6. Android仿淘宝头条滚动广告条

    之前我使用TextView+Handler+动画,实现了一个简单的仿淘宝广告条的滚动,https://download.csdn.net/download/qq_35605213/9660825: 无 ...

  7. JavaScript仿淘宝实现放大镜效果的实例

    我们都知道放大镜效果一般都是用于一些商城中的,列如每当我们打开淘宝,天猫等pc端时,看到心仪的物品时,点击图片时,便呈现出放大镜的效果.在没有去理解分析它的原理时,感觉非常的神奇,当真正地去接触,也是 ...

  8. jquery仿淘宝规格颜色选择效果

    jquery实现的仿淘宝规格颜色选择效果源代码如下 jquery仿淘宝规格颜色选择效果 -收缩HTML代码 运行代码 [如果运行无效果,请自行将源代码保存为html文件运行] <script t ...

  9. android版高仿淘宝客户端源码V2.3

    android版高仿淘宝客户端源码V2.3,这个版本我已经更新到2.3了,源码也上传到源码天堂那里了,大家可以看一下吧,该应用实现了我们常用的购物功能了,也就是在手机上进行网购的流程的,如查看产品(浏 ...

随机推荐

  1. Java中的杂流（闸总）

    标准输入输出流 System.in: 标准输入流是InputStream的子类对象,字节输入流,只不过是jvm给定的唯一一个从键盘控制条读入的流. public static final InputS ...

  2. luoguP1313 [NOIp2011]计算系数 [组合数学]

    题目描述 给定一个多项式(by+ax)^k,请求出多项式展开后x^n*y^m 项的系数. 输入输出格式 输入格式: 输入文件名为factor.in. 共一行,包含5 个整数,分别为 a ,b ,k , ...

  3. move_base 分层代价地图的作用（翻译）

    A. 标准层 ​ Static Map Layer:为了做全局规划,机器人需要一个超越其传感器的地图,以了解墙壁和其他静态障碍物的位置. 静态地图可以先用SLAM算法生成,也可以从架构图中创建. 当层 ...

  4. BZOJ 1565: [NOI2009]植物大战僵尸(网络流+缩点)

    传送门 解题思路 最大权闭合子图.但是要注意一些细节,假如有一堆植物形成一个环,那么这些植物都是无敌的,并且他们保护的植物是无敌的,他们保护的保护的植物是无敌 的.所以要缩点,然后拓扑排序一次判无敌, ...

  5. Valgrind学习

    Valgrind与其他DBI(Pin, DynamoRIO)的区别 我们需要了解DBI的几个 D&R Disassemble-and-Resynthesise 反汇编后重新组装 Valgrin ...

  6. DQL 数据查询语言 IS (information_schema)

    3.information_schema 统计信息库 1.介绍: 视图 1.安全: 只允许查询,不知道操作的对象是谁. 2.方便: 只需要简单的select语句即可使用. 2.作用: 1.方便我们做数 ...

  7. zip压缩详细分析

    该文章转自:http://www.cnblogs.com/esingchan/p/3958962.html (文章写得很详细,让我对zip压缩有了了解,感谢博主,贴在这是为了防止忘了有这么好的文章,侵 ...

  8. docker容器的常见操作

    进入容器 docker exec -it 12a022ee8127 /bin/bash 交互模式进入容器 docker exec -it 12a022ee8127 ip a 查看容器的ip等信息 批量 ...

  9. 使ie8正常支持placeholder

    在IE8下测试,发现一个问题placeholder不被支持,下面是解决IE支持placeholder的方法,本文引用的jquery是1.12.0测试通过,先引用jquery <script ty ...

  10. js浮点数的计算总结

    在js浮点值的计算中,很多时候会出现不准确的情况,如下面的情况 console.log(2.2 + 2.1) // 4.300000000000001 console.log(2.2 - 1.9) / ...