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) 宽度固定,中 ...
随机推荐
- JavaScript之数组高阶API—reduce()
一文搞懂JavaScript数组中最难的数组API--reduce() 前面我们讲了数组的一些基本方法,今天给大家讲一下数组的reduce(),它是数组里面非常重要也是比较难的函数,那么这篇文章就好好 ...
- 关于Docker的一些事--Docker-Compose 升级版本
起源 近来一直在研究怎么搭建自己的私有网盘,本着虚心耐心,认真求是态度,开始做起了实验,最终种草了Nextcloud这款开源网盘,然而用私人的服务器感觉很卡,故转战到了一个基友的服务器,感觉非常吊! ...
- 第2-3-1章 文件存储服务系统-nginx/fastDFS/minio/阿里云oss/七牛云oss
目录 文件存储服务 1. 需求背景 2. 核心功能 3. 存储策略 3.1 本地存储 3.2 FastDFS存储 3.3 云存储 3.4 minio 4. 技术设计 文件存储服务 全套代码及资料全部完 ...
- HDLBits答案——Circuits
1 Combinational Logic 1.1 Basic Gates 1.1.1 Exams/m2014 q4h module top_module ( input in, output out ...
- lambda、map、reduce、filter、sorted函数
# lambda 函数from functools import reducea = lambda x: x ** 2print(a(3))def power(func, l=[]): return ...
- 链接脚本(Linker Scripts)语法和规则解析(自官方手册)
为了便于与英文原文对照学习与理解(部分翻译可能不准确),本文中的每个子章节标题和引用使用的都是官方手册英文原称.命令及命令行选项统一使用斜体书写.高频小节会用蓝色字体标出. 3 Linker Scri ...
- 深入浅出学习透析Nginx服务器的基本原理和配置指南「Keepalive性能分析实战篇」
Linux系统:Centos 7 x64 Nginx版本:1.11.5 Nginx 是一款面向性能设计的 HTTP 服务器,能反向代理 HTTP,HTTPS 和邮件相关(SMTP,POP3,IMAP) ...
- Clickhouse表引擎之MergeTree
1.概述 在Clickhouse中有多种表引擎,不同的表引擎拥有不同的功能,它直接决定了数据如何读写.是否能够并发读写.是否支持索引.数据是否可备份等等.本篇博客笔者将为大家介绍Clickhouse中 ...
- 【Java SE】课程目录
〇.课程简介 一.前言入门 二.数据类型.运算符.方法 三.流程控制 四.Idea.方法 五.数组 六.类.对象.封装.构造 七.Scanner类.Random类.ArrayList类 八.Strin ...
- 3.7V升压5V，3.7V转5V电路图芯片
锂离子电池在如今是广泛应用存在我们生活中的方方面面的电子产品中.如,电子玩具,美容仪,医疗产品,智能手表,手机,笔记本,电动汽车等等非常多. 锂电池3.7V升压到5V,3.7V转5V稳压输出的电子产品 ...