<!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. Mysql学习笔记（001）-常见命令

    常见命令 SHOW DATABASES; /* use test; create database myemployees; use myemployees; create table employe ...

  2. 自定义checkbox,radio样式

    input[type=radio] { margin-right: 5px; cursor: pointer; font-size: 14px; width: 15px; height: 15px; ...

  3. 解决SQLite中的 database is locked

    前些时候,同事在站点服务端使用SQlite存储一些临时数据,但是在多人并发的时候Sqlite会抛出异常:The database file is locked , database is locked ...

  4. 攻防世界 MISC篇

    Excaliflag 一张图片,winhex打开没什么发现,分值不高,应该属于常见的图片隐写题目.如果对于图片的格式有详细的了解,应该很容易就能够知道了属于最低有效位(LSB)隐写,下面是通过phot ...

  5. [NOIP模拟23]题解

    中间鸽了好几篇啊QAQ……有时间再补吧…… A.mine sbdp,考场上写的巨麻烦不过还是能A的(虽然MLE了……每一维都少开1就A掉了555).设$dp[i][j][k]$为枚举到第i位,第i位是 ...

  6. 2018—2019—2 20165239《网络对抗技术》Exp7 网络欺诈防范

    一.原理与实践说明 1.实践目标 本实践的目标是:理解常用网络欺诈背后的原理,以提高防范意识,并提出具体防范方法. 2.实践内容概述 简单应用SET工具建立冒名网站 (1分) ettercap DNS ...

  7. UVA 10242 Fourth Point

    题意:给你平行四边形两条边的顶点,让你求第四个点. 思路:要找到俩边的公共点,然后向量运算. AC代码: #include<cstdio> #include<cmath> #i ...

  8. playbackRate控制音频播放倍速

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. k8s 资源管理

    对应到Kubernetes的Pod容器上,就是下面这4个参数:◎ spec.container[].resources.requests.cpu:◎ spec.container[].resource ...

  10. error C4996: 'getcwd': The POSIX name for this item is deprecated. Instead, use the ISO C++ conformant name: _getcwd. See online help for details. c:\users\12968\desktop\testapp\testapp\testapp.c

    解决办法: 属性>C/C++>预处理器定义>分别输入: _CRT_SECURE_NO_WARNINGS _CRT_SECURE_NO_DEPRECATE >保存退出即可