flex实现圣杯布局
<!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实现圣杯布局的更多相关文章
- flex的圣杯布局记录 （flex : 0 0 80px）
- CSS布局-圣杯布局
圣杯布局 圣杯布局很完美(兼容所有浏览器,包括IE6),但是使用了相对定位,布局有局限性,宽度控制要改的地方也多. 第一种方法公用部分: .lgyz, .lzrg, .lrzcg, .lcgrz, . ...
- flex 圣杯布局
基本思路 圣杯布局分为3段:上.中.下. 中段被分为:左.中.右3块. 1:采用flex布局时,先把弹性容器主轴设置为垂直方向(flex-direction:column) 2:上.中.下3块弹性项 ...
- flex做的圣杯布局
now,给大家分享一个用flex写的圣杯布局,大家可以参考一下子 首先圣杯布局是两列固定宽度,中间自适应. 我直接说一下步骤,上图,上图 1.步骤1 2.步骤2 上面就是基本的步骤,下面我把代码给大家 ...
- 【CSS-flex】圣杯布局（Holy Grail Layout）、输入框的布局、悬挂式布局、固定的底栏
1.圣杯布局(Holy Grail Layout) 其指的是一种最常见的网站布局.页面从上到下,分成三个部分:头部(header),躯干(body),尾部(footer).其中躯干又水平分成三栏,从左 ...
- vue-cli中圣杯布局失效问题
众所周知vue2在前端框架越来越流行,vue-cli这个脚手架工具是我们前端开发必用的,大大的提升了我们的开发效率.当然对于前端小白来说,有些遇到的问题需要和大家分享一下. 移动端页面经常都是需要圣杯 ...
- css布局 -双飞翼布局&圣杯布局
一,双飞翼布局 左右两边固定,中间可以随着浏览器放大和缩小 <!DOCTYPE html> <html lang="en"> <head> &l ...
- css——圣杯布局
圣杯布局要求 header和footer各自占领屏幕所有宽度,高度固定 中间dontainer部分为左中右三栏式布局 三栏布局中左右两侧宽度固定,中间部分自动填充 实现方式 1.浮动 先定义heade ...
- css两栏布局、圣杯布局、双飞翼布局
最近几个月一直用vue在写手机端的项目,主要写业务逻辑,在js方面投入的时间和精力也比较多.这两天写页面明显感觉css布局方面的知识有不足,所以复习一下布局方法. 两栏布局 1.浮动 .box1 .l ...
- CSS布局 -- 圣杯布局 & 双飞翼布局
按照我的理解,其实圣杯布局跟双飞翼布局的实现,目的都是左右两栏固定宽度,中间部分自适应. 但在这里实现起来还是有一些区别的 [圣杯布局] 在这里,实现了左(200px) 右(220px) 宽度固定,中 ...
随机推荐
- CC1,3,6回顾
前言 前面陆续学习了CC1,CC3,CC6,以及TemplatesImpl以及改造,有点乱,正所谓温故而知新嘛,所以这篇就回顾一下,捋一捋,解决一些细节问题. CC1 由于CC1要介绍CC链的几个关键 ...
- Day10：for循环结构的使用详解
for循环 将0~100内的奇.偶数分别求和 思路 第一步先将0~100以内的奇.偶数分成两队,第二步使奇数累加.ou'shu public class ForCirculate{ public st ...
- 嵌入式-C语言基础：指针
指针就是地址,变量的值可以通过两种方式访问,一个是通过变量名,一个是通过地址访问. 从而引出一个问题,即什么是指针变量?整型(字符)变量就是存放整形(字符)的变量,指针变量就是存放指针的变量,也就是存 ...
- C语言实验手册
在三位整数(100~999)中寻找符合条件的整数,并以此从小到大存到数组当中,它既是完全平方数,又是两位数字相同,例如144,676等. #include<stdio.h> #includ ...
- 【Spring系列】- Spring事务底层原理
Spring事务底层原理 生命不息,写作不止 继续踏上学习之路,学之分享笔记 总有一天我也能像各位大佬一样 一个有梦有戏的人 @怒放吧德德 分享学习心得,欢迎指正,大家一起学习成长! 目录 Sprin ...
- ubuntu 18.04安装tensorflow (CPU)
在已经安装anaconda环境及pip之后. 添加并设置pip配置文件: mkdir ~/.pip vim ~/.pip/pip.conf pip.conf文件内容: [global] index-u ...
- React基础学习知识笔记
React项目的核心就是index.js 第一个程序 import React from 'react'; import ReactDOM from 'react-dom';ReactDOM.rend ...
- combotree 的简单使用2
上一次我在 combotree 的简单使用 中介绍了一种combotree的写法,不过有一个缺点,就是当输的结构非常大的时候,分级较多时,消耗内存的现象会比较严重,下面介绍的一种方法,使combotr ...
- (Java)设计模式：行为型
前言 此篇博文内容续接的是 UML建模语言.设计原则.创建型设计模式 的内容,有兴趣的可以点前面的链接去看一下 3.2.行为型 这类设计模式是专门用于:对象间的高效沟通和职责委派 * 3.2.1.责任 ...
- JavaScript笔记基础
JavaScript合集 学完HTML5+CSS3的小伙伴,学习JS时,要多敲多练多想多拓展 刚开始入门JS的时候,我们不需要纠结那么多,有些需要先记住,后面会慢慢明白为什么是这样的 JS基础部分 我 ...