三栏布局之 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=" ...
随机推荐
- 你不知道的javaScript上卷(第一章 作用域是什么)
在写这篇博客时这本书我已经是看过一遍了,为了加深印象和深入学习于是打算做这系列的前端经典书籍导读博文,大家如果觉得这本书讲的好可以自己买来看看,我是比较喜欢看纸质版书的,因为这样才有读书的那种感觉. ...
- java 内部类 嵌套类
.markdown-body { color: #24292e; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI" ...
- Mysql的管理及使用
第1章 Mysql的管理 1.1 连接管理mysql mysql[options] #Linux或UNIX shell提示符(终端窗口) mysql --help #查看帮助信息 mysql --ve ...
- 运行期以索引获取tuple元素-C++14
在编译期很容易根据索引来获取对应位置的元素,因为 tuple 的帮助函数 std::get<N>(tp) 就能获取 tuple 中第 N 个元素.然而我们却不能直接在运行期通过变量来获取 ...
- Python爬虫(九)_非结构化数据与结构化数据
爬虫的一个重要步骤就是页面解析与数据提取.更多内容请参考:Python学习指南 页面解析与数据提取 实际上爬虫一共就四个主要步骤: 定(要知道你准备在哪个范围或者网站去搜索) 爬(将所有的网站的内容全 ...
- poj 1797 Heavy Transportation（最大生成树）
poj 1797 Heavy Transportation Description Background Hugo Heavy is happy. After the breakdown of the ...
- Cocos2d-X使用CCAnimation创建动画
动画在游戏中是很常见的 程序1:创建一个简单的动画 首先须要在project文件夹下的Resource文件夹中放一张有各种不同动作的图片 在程序中加入以下的代码 #include "Anim ...
- Android中使用ContentProvider进行跨进程方法调用
原文同一时候发表在我的博客 点我进入还能看到很多其它 需求背景 近期接到这样一个需求,须要和别的 App 进行联动交互,比方下载器 App 和桌面 App 进行联动.桌面的 App 能直接显示下载器 ...
- 学习日记之工厂方法模式和Effective C++
简单工厂模式VS工厂方法模式: 简单工厂模式:最大长处在于工厂类中必须包括必要的逻辑推断,依据client选择条件动态实例化相关类,对于client来说,去除了与详细产品的依赖. 工厂方法模式(Fac ...
- 【Espruino】NO.12 加速度传感器演示
http://blog.csdn.net/qwert1213131/article/details/31035403 本文属于个人理解,能力有限,纰漏在所难免.还望指正! [小鱼有点电] [Espru ...