<!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. spark window本地运行wordcount错误

    在运行本地运行spark或者hadoop代码时可能会遇到一下三种问题   1.Exception in thread "main" java.lang.UnsatisfiedLin ...

  2. 控制台Cannot read property 'disabled' of null报错的问题

    点击任何东西控制台都会报错: 也没有提示哪儿出了问题,后来我就代码一块一块的注释,终于找到了原因. 我在项目中用了 el-dropdown ,但是没有用他的el-dropdown-menu 所以才会一 ...

  3. 第十一次 LL(1)文法的判断，递归下降分析程序

    1. 文法 G(S): (1)S -> AB (2)A ->Da|ε (3)B -> cC (4)C -> aADC |ε (5)D -> b|ε 验证文法 G(S)是不 ...

  4. 在IntelliJ IDEA中新建Maven项目

    在IntelliJ IDEA中新建Maven项目,选择“File->New->Project”,创建一个简单项目,不选择模板,如下图所示: 2 选择“Maven”,不需要使用内置结构(模板 ...

  5. 【LeetCode 4】寻找两个有序数组的中位数

    题目链接 [题解] 假设在两个有序的序列中找第k小的数字. 那么我们先定位第一个序列中的第k/2个数字(不足则取最边上的那个数字)记下标为i1 然后定位第二个序列中的第k/2个数字(同样不足则取最边上 ...

  6. Service4

    DNS解析的作用• 为什么需要DNS系统– www.baidu.com 与 119.75.217.56,哪个更好记?– 互联网中的114查号台/导航员 • DNS服务器的功能– 正向解析:根据注册的域 ...

  7. Delphi 2010 XE 中使用 JSON 之 SuperObject68-6

    JSON之SuperObject(1):一直盼着Delphi能够直接支持"正则:Delphi2009刚来的时候,有了JSON,但:Delphi2010带了两个相关单元:DBXJS:我想不等了 ...

  8. yield列表反转 islice切片（2.6）

    yield列表反转 islice切片 列表反转 l1 = [i for i in range(10)] print(l1) print(l1[::2]) l1.reverse() # 注: pytho ...

  9. fatal error C1189: #error : "No Target Architecture" 解决办法一

    在编译程序的时候发现报这个错误,在网上看到很多文章,说设置include路径,lib目录等等,都没有解决.最后调整了以下include文件的顺序,问题解决了.例如 从头文件a.h中截取的一段 type ...

  10. Dubbo入门到精通学习笔记（十二）：Dubbo消费端直连提供者（开发调试）、Dubbo服务只订阅（开发调试）、Dubbo服务只注册

    文章目录 Dubbo消费端直连提供者(开发调试) Dubbo服务只订阅(开发调试) Dubbo服务只注册 Dubbo消费端直连提供者(开发调试) Dubbo 官方文档: 用户指南 >> 示 ...