三栏布局之 css3 calc和 flex
圣杯布局的实现，有很多种。
大致都是借助 padding, margin， float之类的，当然这是传统的实现方式。更多的参考方式圣杯布局小结.
这里说的是用css3 cal 和flex来实现，因为css有限，有不当或者错误之处，敬请指出。
css3 cal 的支持情况，总体 93%。
flex布局的支持情况， 总体97%
为了增加复杂度
1. 块之间有间距
2. 有 border
3. 都采用了 box-sizing: content-box
先看 calc的实现
<!DOCTYPE html>
<html lang="en"> <head>
<title>css3 cal</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
html,
body {
height: %;
width: %;
margin: ;
padding: ;
box-sizing: border-box
} .header {
background: red;
height: 100px;
} .footer {
height: 100px;
position: absolute;
bottom: ;
width: %;
box-sizing: border-box;
background-color: palevioletred
} .header,
.footer,
.left,
.content,
.right {
border: 10px solid black;
box-sizing: border-box
} .left {
margin: 20px ;
background: green;
width: 100px;
} .content {
margin: 20px 20px;
background-color: silver;
width: calc(% - 240px);
width: -webkit-calc(% - 240px);
width: -moz-cal(%-240px);
} .right {
margin: 20px ;
background-color: yellow;
width: 100px;
} .left,
.content,
.right {
float: left;
height: calc(% - 240px);
height: -webkit-calc(% - 240px);
height: -moz-cal(%-240px);
}
</style>
</head> <body>
<div class="header">header</div>
<div class="left">left</div>
<div class="content">content</div>
<div class="right">right</div>
<div class="footer">footer</div>
</body> </html>
效果
现在看flex的实现方式
<!DOCTYPE html>
<html lang="en"> <head>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
html,
body {
height: %;
width: %;
margin: ;
padding:
} body {
display: flex;
flex-direction: column;
} .header {
height: 100px;
background: red;
} #container {
display: flex;
flex: auto;
margin: 20px ;
} .left {
background-color: green;
} .right {
background-color: yellow;
} .content {
flex: auto;
background-color: silver;
margin: 20px;
} .footer {
height: 100px;
width: %;
background-color: palevioletred
} .left,
.right {
flex: 100px;
} .left,
.right,
.content,
.header,
.footer {
box-sizing: border-box;
border: 10px solid black;
}
</style>
</head> <body>
<div class="header">header</div>
<div id='container'>
<div class="left">left</div>
<div class="content">content</div>
<div class="right">right</div>
</div>
<div class="footer">footer</div>
</body> </html>
效果：
效果是一样的，都只是拉伸缩放自动填满。
但是都把 box-sizing: border-box 删除掉的时候，会发现 calc已经坏掉了，但是flex依旧没有发生混乱。
这就是我为什么爱flex的原因。 还有这么复杂的去计算，真心的类，支持度还没flex高。
难道是我还是太年轻吧。
引用：
三栏布局之 css3 calc和 flex的更多相关文章
- CSS3使用盒模型实现三栏布局
本篇文章由:http://xinpure.com/css3-box-model-to-implement-a-three-column-layout/ 使用 Position 绝对定位也是可以实现三栏 ...
- 使用display:flex;实现两栏布局和三栏布局
一.使用display:flex;实现两栏布局 body,div{margin:0px;padding:0px;} .flex-container{display:flex;height:300px; ...
- 三栏布局的三个典型方法（圣杯、双飞翼、flex）
聊聊三栏布局----左右定宽,中间自适应. 效果图: 圣杯布局 <!DOCTYPE html> <html> <head lang="en"> ...
- css-前端实现左中右三栏布局的常用方法:绝对定位，圣杯，双飞翼，flex，table-cell,网格布局等
1.前言 作为一个前端开发人员,工作学习中经常会遇到快速构建网页布局的情况,这篇我整理了一下我知道的一些方法.我也是第一次总结,包括圣杯布局,双飞翼布局,table-cell布局都是第一次听说,可能会 ...
- ccs之经典布局（二）（两栏，三栏布局）
接上篇ccs之经典布局(一)(水平垂直居中) 四.两列布局 单列宽度固定,另一列宽度是自适应. 1.float+overflow:auto; 固定端用float进行浮动,自适应的用overflow:a ...
- CSS布局 - 三栏布局
CSS布局技术可谓是前端技术中最基础的技术,就是因为基础,所以我认为要更加熟练,深入的去掌握,去梳理. 一. 传统 ---> 浮动实现的三栏布局 采用浮动实现的三栏布局有以下特点及注意事项: · ...
- 布局：高度已知，布局一个三栏布局，左栏和右栏宽度为200px，中间自适应
需求:高度已知为200px,写出三栏布局,左栏和右栏各位200px,中间自适应,如下图所示: 方法一:float浮动布局 原理是:定义三个区块,需要注意的是中间的区块放在右边区块的下面,统一设置高度为 ...
- 如何用CSS实现中间自适应，两边定宽三栏布局
1.前言 用css实现“两边定宽,中间自适应的三栏布局”这个问题应该是在前端面试中被面试官提问到的高频问题了,一般当面试者写出一种实现方法之后,面试官还会问你还有没有别的方法,尽量多的写出几种实现方法 ...
- css常见双栏和三栏布局
左侧固定右侧自适应 <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...
随机推荐
- Python+Selenium webdriver Api
# -*- coding: utf-8 -*- from selenium import webdriver browser = webdriver.Firefox() #browser.set_wi ...
- 解析XML文件之使用SAM解析器
XML是一种常见的传输数据方式,所以在开发中,我们会遇到对XML文件进行解析的时候,本篇主要介绍使用SAM解析器,对XML文件进行解析. SAX解析器的长处是显而易见的.那就是SAX并不须要将全部的文 ...
- Deming管理系列（2）——怎样开发度量能力
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdTAxMTI1MDQ1NQ==/font/5a6L5L2T/fontsize/400/fill/I0JBQk ...
- 自学Zabbix3.8-可视化Visualisation
随着大量数据流入Zabbix,如果用户能够查看正在发生的事情,而不仅仅是数字,那么对于用户来说,这就变得容易得多了.这就是图的所在. 图允许快速地掌握数据流,关联问题,发现什么时候开始,或者做什么事情 ...
- Effective Java 第三版——7. 消除过期的对象引用
Tips <Effective Java, Third Edition>一书英文版已经出版,这本书的第二版想必很多人都读过,号称Java四大名著之一,不过第二版2009年出版,到现在已经将 ...
- 给虚拟机添加新硬盘并分区，fdisk查看分区，分区，重新读取分区表信息partprobe，格式化，挂载，查看分区挂载信息，自动挂载文件/etc/fstab，/etc/fstab文件错误导致重启崩溃后的修复
1.虚拟机关机断电 2.添加硬盘 2.开机 3.fdisk -l查看刚才新添加的硬盘 [root@localhost ~]# fdisk -l 磁盘 /dev/sda:21.5 GB, 2147483 ...
- iOS转场动画封装
写在前面 iOS在modal 或push等操作时有默认的转场动画,但有时候我们又需要特定的转场动画效果,从iOS7开始,苹果就提供了自定义转场的API,模态推送present和dismiss.导航控制 ...
- H5之前端操作文件
js是否能够操作文件? js在HTML5以前浏览器端是无法操作文件的,但HTML5中给a标签增加了一个download属性,只要有这个属性,点击这个链接时浏览器就不在打开链接指向的文件,而是改为下载( ...
- BSGS离散对数（Baby-Step-Giant-Step）
BSGS离散对数(Baby-Step-Giant-Step) 题目: 给定\(x,y,p,\)求最小的自然数\(k\)满足\(x^k=y(\mod p)\)\(p\le2^{31}\)(满足一定有答案 ...
- C#程序打包安装部署
今天为大家整理了一些怎样去做程序安装包的具体文档,这些文档并不能确保每个人在做安装包的时候都能正确去生成和运行,但是这些文档的指导作用对于需要的朋友来说还是很有必要的,在实际产品的安装部署过程中可能有 ...