<!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. Codeforces Round #832 (Div. 2) A~C题解

    目录 A B C A 思路:这个题的话我们把负数和整数分别求出来,比较绝对值的大小,用较大的那个减去较小的那个就可以了. #include <cstring> #include <i ...

  2. 嵌入式-C语言基础：实现字符串拷贝函数

    自己实现一个字符串的拷贝函数 #include<stdio.h> #include<stdlib.h> #include <string.h> char * mys ...

  3. 【Java集合框架002】原理层面：HashMap全解析

    一.前言 二.HashMap 2.1 HashMap数据结构 + HashMap线程不安全 + 哈希冲突 2.1.1 HashMap数据结构 学习的时候,先整体后细节,HashMap整体结构是 底层数 ...

  4. Linux C++目标中添加git版本信息

    项目代码根目录下添加一个cmake文件git_version.cmake,内容如下: # get git hash macro(get_git_hash _git_hash) set(ENV{GIT_ ...

  5. Fastjsonfan反序列化(一)

    前置知识 Fastjson 是一个 Java 库,可以将 Java 对象转换为 JSON 格式,当然它也可以将 JSON 字符串转换为 Java 对象. Fastjson 可以操作任何 Java 对象 ...

  6. 关于CSDN获取博客内容接口的x-ca-signature签名算法研究

    前言 源码下载 不知道怎么就不通过了,这篇文章放出去几个月了,然后突然告诉我不行了,所以我打算换个平台(至少不能在一棵树吊死),垃圾审核 我最初想直接获取html博客,然后保存在本地,最后发布到别的博 ...

  7. Docker定时删除none镜像

    在使用docker的时候会产生none镜像文件,偶尔没什么,但是比如使用了自动化部署工具那就不一样了,一天没准就上百个none镜像了,非常消耗资源,所以需要定时清理 删除 none 镜像命令 dock ...

  8. JDK卸载

    JDK卸载 从环境变量里的JAVA_HOME里找到jdk的主程序,删掉 把JAVA_HOME删掉,在把path里跟java_home相关的也删掉 在cmd里运行java-version

  9. 前端开发：4、JavaScript简介、变量与常量、数据类型及内置方法、运算符、流程控制、循环结构、内置方法

    前端开发之JavaScript 目录 前端开发之JavaScript 一.JavaScript简介 二.JS基础 三.变量与常量 四.基本数据类型 1.数值类型 2.字符类型 3.布尔类型 五.特殊数 ...

  10. webpack :There are multiple modules with names that only differ in casing

    1, webpack版本3.6.0 2. 报warning文件为 node_modules 下面webpack 里的hot.js和dev-server.js 3. 没有出现模块名混用大小写 解决方法: ...