<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

    *{

        margin:0;padding:0;

    }

    .container{

        display: flex;

        height: 100vh;

        flex-direction: column;

    }

    header{

        background: #000;

    }

    section{

        flex:1;

        background: pink;

        display: flex;

    }

    footer{

        background: #000;

    }

    .left{

        background: red;

        flex:0 0 100px;

    }

    .center{

        flex:1;

        background: blue;

    }

    .right{

        flex:0 0 100px;

        background: red;

    }

    </style>

</head>

<body>

<div class='container'>

    <header>头部</header>

    <section>

        <div class='left'>左</div>

        <div class='center'>中</div>

        <div class='right'>右</div>

    </section>

    <footer>底部</footer>

</div>

</body>

</html>

flex实现圣杯布局的更多相关文章

  1. flex的圣杯布局记录 （flex : 0 0 80px）

  2. CSS布局-圣杯布局

    圣杯布局 圣杯布局很完美(兼容所有浏览器,包括IE6),但是使用了相对定位,布局有局限性,宽度控制要改的地方也多. 第一种方法公用部分: .lgyz, .lzrg, .lrzcg, .lcgrz, . ...

  3. flex 圣杯布局

    基本思路 圣杯布局分为3段:上.中.下.  中段被分为:左.中.右3块. 1:采用flex布局时,先把弹性容器主轴设置为垂直方向(flex-direction:column) 2:上.中.下3块弹性项 ...

  4. flex做的圣杯布局

    now,给大家分享一个用flex写的圣杯布局,大家可以参考一下子 首先圣杯布局是两列固定宽度,中间自适应. 我直接说一下步骤,上图,上图 1.步骤1 2.步骤2 上面就是基本的步骤,下面我把代码给大家 ...

  5. 【CSS-flex】圣杯布局（Holy Grail Layout）、输入框的布局、悬挂式布局、固定的底栏

    1.圣杯布局(Holy Grail Layout) 其指的是一种最常见的网站布局.页面从上到下,分成三个部分:头部(header),躯干(body),尾部(footer).其中躯干又水平分成三栏,从左 ...

  6. vue-cli中圣杯布局失效问题

    众所周知vue2在前端框架越来越流行,vue-cli这个脚手架工具是我们前端开发必用的,大大的提升了我们的开发效率.当然对于前端小白来说,有些遇到的问题需要和大家分享一下. 移动端页面经常都是需要圣杯 ...

  7. css布局 -双飞翼布局&圣杯布局

    一,双飞翼布局 左右两边固定,中间可以随着浏览器放大和缩小 <!DOCTYPE html> <html lang="en"> <head> &l ...

  8. css——圣杯布局

    圣杯布局要求 header和footer各自占领屏幕所有宽度,高度固定 中间dontainer部分为左中右三栏式布局 三栏布局中左右两侧宽度固定,中间部分自动填充 实现方式 1.浮动 先定义heade ...

  9. css两栏布局、圣杯布局、双飞翼布局

    最近几个月一直用vue在写手机端的项目,主要写业务逻辑,在js方面投入的时间和精力也比较多.这两天写页面明显感觉css布局方面的知识有不足,所以复习一下布局方法. 两栏布局 1.浮动 .box1 .l ...

  10. CSS布局 -- 圣杯布局 & 双飞翼布局

    按照我的理解,其实圣杯布局跟双飞翼布局的实现,目的都是左右两栏固定宽度,中间部分自适应. 但在这里实现起来还是有一些区别的 [圣杯布局] 在这里,实现了左(200px) 右(220px) 宽度固定,中 ...

随机推荐

  1. 一个超经典 WinForm 卡死问题的再反思

    一:背景 1.讲故事 这篇文章起源于昨天的一位朋友发给我的dump文件,说它的程序出现了卡死,看了下程序的主线程栈,居然又碰到了 OnUserPreferenceChanged 导致的挂死问题,真的是 ...

  2. Windows版CheatSheet——一键显示当前程序快捷键列表

    Windows系统上的各种软件有太多的快捷键,想要记住是几乎不可能的,推荐一个一键显示当前软件快捷键的软件,在使用其他程序的时候,只要按下Ctrl+`就可以理解弹出该软件的所有快捷键列表,还支持收藏功 ...

  3. 如何把Java代码玩出花？JVM Sandbox入门教程与原理浅谈

    在日常业务代码开发中,我们经常接触到AOP,比如熟知的Spring AOP.我们用它来做业务切面,比如登录校验,日志记录,性能监控,全局过滤器等.但Spring AOP有一个局限性,并不是所有的类都托 ...

  4. Go语言核心36讲24

    你好,我是郝林,今天我们继续来聊聊panic函数.recover函数以及defer语句的内容. 我在前一篇文章提到过这样一个说法,panic之中可以包含一个值,用于简要解释引发此panic的原因. 如 ...

  5. 【OpenStack云平台】openstack命令行管理之环境变量设置

    上传镜像(glance组件) glance 可以使用以下参数: ps:这些参数不是100%都需要的我们在上传镜像更加我们需求选择相对应的参数就好了 –id <IMAGE_ID> #镜像的I ...

  6. phpexcel 小技巧

    //设置填充的样式和背景色$objPHPExcel->getActiveSheet()->getStyle( 'A1:AU1')->getFill()->setFillType ...

  7. java 运用jxl 读取和输出Excel

    文章结尾源码以及jxl包 1.输出excel: package JmExcel; import java.io.File; import java.io.FileOutputStream; impor ...

  8. OpenLooKeng

    一.登录注册 网址为:https://tryme.openlookeng.io/,进入该网址后可以看到以下界面: 可以选择左边的GitHub或者右边的Gitee进行登录,如果没有账号需要注册一个账号进 ...

  9. 【Spark】Day06-Spark高级课程：性能调优、算子调优、Shuffle调优、JVM调优、数据倾斜、TroubleShooting

    一.Spark性能调优 1.常规性能调优 (1)最优资源配置:Executor数量.Executor内存大小.CPU核心数量&Driver内存 (2)RDD优化:RDD复用.RDD持久化(序列 ...

  10. 【机器学习】李宏毅——Transformer

    Transformer具体就是属于Sequence-to-Sequence的模型,而且输出的向量的长度并不能够确定,应用场景如语音辨识.机器翻译,甚至是语音翻译等等,在文字上的话例如聊天机器人.文章摘 ...