圣杯布局要求

  • header和footer各自占领屏幕所有宽度，高度固定
  • 中间dontainer部分为左中右三栏式布局
  • 三栏布局中左右两侧宽度固定，中间部分自动填充

实现方式

1.浮动

  • 先定义header和footer的样式，使其宽度撑满，高度随意
  • container中三列设置为浮动和相对定位，且center部分放在最起那么，对footer设置clear:both;清除浮动
  • 三列中的左右定宽200px，中间设置100%
  • 由于浮动关系，center会撑满container，左右会被挤下去，给left添加margin-left:-100%,使left回到上一行的最左侧
  • 会发现left遮住了center部分，给container设置padding-left:200px;padding-right:200px;,给left和right腾出位置；
  • 这时的left由于padding的原因并不在最左侧，之前设置了定位，可以给left添加right:200px,使left回到最左侧
  • 对于right可以设置margin-right:-200px;，使其回到第一行

最好设置一个最小宽度防止页面变形

 1 <!DOCTYPE html>

 2 <html>

 3

 4 <head>

 5     <meta charset="utf-8">

 6     <meta http-equiv="X-UA-Compatible" content="IE=edge">

 7     <title>圣杯布局</title>

 8     <link rel="stylesheet" href="">

 9 </head>

10 <style type="text/css" media="screen">

11     /**

12      圣杯布局要求

13         1.header和footer各自占领屏幕所有宽度，高度固定。

14         2.中间的container是一个三栏布局。

15         3.三栏布局两侧宽度固定不变，中间部分自动填充整个区域。

16         4.中间部分的高度是三栏中最高的区域的高度。

17      */

18     body {

19         min-width: 600px;

20     }

21

22     .header, .footer {

23         width: 100%;

24         height: 100px;

25         background: #ccc;

26     }

27

28     .footer {

29         clear: both;

30     }

31

32     .container {

33         padding: 0 200px;

34     }

35

36     .container .column {

37         float: left;

38         position: relative;

39         height: 400px;

40     }

41

42     #left {

43         width: 200px;

44         right: 200px;

45         background: pink;

46         margin-left: -100%;

47     }

48

49     #right {

50         width: 200px;

51         background: red;

52         margin-right: -200px;

53     }

54

55     #center {

56         width: 100%;

57         background: blue;

58     }

59 </style>

60

61 <body>

62 <div class="header">header</div>

63 <div class="container">

64     <div id="center" class="column">center</div>

65     <div id="left" class="column">left</div>

66     <div id="right" class="column">right</div>

67 </div>

68 <div class="footer">footer</div>

69 </body>

70

71 </html>

2.flex弹性布局

  • 先定义header和footer的样式，使其宽度撑满，高度随意
  • container中的left、center、right依次排列
  • container设置弹性布局display：flex;
  • left、right区域定宽，center部分设置flex:1;
 1 <!DOCTYPE html>

 2 <html lang="en">

 3 <head>

 4     <meta charset="UTF-8">

 5     <title>圣杯布局-flex</title>

 6 </head>

 7 <style>

 8     body{

 9         min-width: 600px;

10     }

11     .header,.footer{

12         width: 100%;

13         height: 100px;

14         background: #ccc;

15     }

16     .container{

17         display: flex;

18     }

19     .container .column{

20         height: 400px;

21     }

22     #left{

23         width: 200px;

24         background: pink;

25     }

26     #center{

27         flex: 1;

28         background: blue;

29     }

30     #right{

31         width: 200px;

32         background: red;

33     }

34 </style>

35 <body>

36 <div class="header">header</div>

37 <div class="container">

38     <div id="left" class="column">left</div>

39     <div id="center" class="column">center</div>

40     <div id="right" class="column">right</div>

41 </div>

42 <div class="footer">footer</div>

43 </body>

44 </html>

css——圣杯布局的更多相关文章

  1. css圣杯布局的实现方式

    css圣杯布局思路: 外面一个大div,里面三个小div(都是浮动).实现左右两栏宽度固定,中间宽度自适应.中间栏优先渲染. 资源网站大全 https://55wd.com 设计导航https://w ...

  2. CSS 圣杯布局升级版---多个固定宽度一个自适应宽度

    1.一个div固定,一个div自适应宽度.两种情况,固定在左或者在右. HTML: <div class="box1"> <div class="mai ...

  3. CSS 圣杯布局 / 双飞翼布局的实现

    工作的越久,有些基础知识我们可能就逐渐淡忘了,今天我们来回顾一下css的圣杯布局和双飞翼布局, 这两个名词你可能不熟, 那三栏布局你肯定就非常熟悉了, 就是两边定宽, 中间自适应 的 布局 1 , 圣 ...

  4. CSS | 圣杯布局、双飞翼布局 | 自适应三栏布局

    圣杯布局和双飞翼布局是前端工程师需要日常掌握的重要布局方式.两者的功能相同,都是为了实现一个两侧宽度固定,中间宽度自适应的三栏布局 虽然两者的实现方法略有差异,不过都遵循了以下要点: 1.两侧宽度固定 ...

  5. CSS 圣杯布局

    前端的两个经典布局想必大家都有多了解--圣杯布局和双飞翼布局,因为它既能体现你懂HTML结构又能体现出你对DIV+CSS布局的掌握. 事实上,圣杯布局其实和双飞翼布局是一回事.它们实现的都是三栏布局, ...

  6. css圣杯布局、等高布局

    所谓圣杯布局,就是自适应浏览器的分辨率,也称双飞翼布局. 例子: <style> body{margin:0;} .center{height:600px;background:#f60; ...

  7. CSS圣杯布局、双飞翼布局详解

    三栏布局中,经典中的经典应该就是圣杯布局.双飞翼布局没跑了.双飞翼布局和圣杯布局其实是一样的,只不过在写法上有些不同,其布局都是左右固定宽度,中间宽度自适应. 先熟悉一下圣杯布局.双飞翼布局中的特点: ...

  8. css圣杯布局

    HTML <div class="container"> <div class="content">content</div> ...

  9. CSS布局 -- 圣杯布局 & 双飞翼布局

    按照我的理解,其实圣杯布局跟双飞翼布局的实现,目的都是左右两栏固定宽度,中间部分自适应. 但在这里实现起来还是有一些区别的 [圣杯布局] 在这里,实现了左(200px) 右(220px) 宽度固定,中 ...

随机推荐

  1. 使用EasySYS搭建驱动开发基本框架

    提供EasySYS的下载地址:http://bbs.pediy.com/showthread.php?p=956643,看雪上有提供下载,自行百度. EasySYS你能够帮我们快速的搭建驱动的开发框架 ...

  2. POJ1548最小路径覆盖

    题意:       给你一个DAG,然后问你最少多少条路径能覆盖所有需要覆盖的点. 思路:       最小路径覆盖,太明显了,每个点向它右下方的点连边,然后...没啥难的地方,不说了. #inclu ...

  3. PHP 通用格式化调试函数

    /** * 打印调试函数 * @param $content * @param $is_die */function pre($content, $is_die = true){ header('Co ...

  4. 取消本地SVN文件夹与服务器的关联

    方法一. 1.新建文本文档,添加内容如下: Windows Registry Editor Version 5.00 [HKEY_LOCAL_MACHINE\SOFTWARE\Classes\Fold ...

  5. SQL必知必会 —— 性能优化篇

    数据库调优概述 数据库中的存储结构是怎样的 在数据库中,不论读一行,还是读多行,都是将这些行所在的页进行加载.也就是说,数据库管理存储空间的基本单位是页(Page). 一个页中可以存储多个行记录(Ro ...

  6. 阿里面试官用HashMap把我问倒了

    本人是一名大三学生,最近在找暑期实习,其中也面试过两次阿里,一次菜鸟网络部门.一次网商银行部门,当然我都失败了,同时也让我印象很深刻,因此记录了其中一些面试心得,我觉得这个问题很值得分享,因此分享给大 ...

  7. java数组 简单了解

    一.关于集合 1.数组,链表和哈希表(散列表)的存储方式 (1)传统的数组结构存储数据会在内存中开辟连续得空间,结合下标从而使得可以快速访问数据,但是删除和添加数据就很浪费资源 (2)链表不需要开辟连 ...

  8. ArcGIS JS API使用PrintTask打印地图问题解决汇总

    环境:来源于工作过程,使用的API是  arcgis js 3.*  3系API,4.*暂时没测试: 1.数据与打印服务跨域情况下,不能打印问题. 一般情况下,我们发布的数据服务和打印服务是在一台服务 ...

  9. 面试题：ArrayList、LinkedList、Vector三者的异同？

    面试题:ArrayList.LinkedList.Vector三者的异同? 同:三个类都是实现了List接口(Collection的子接口之一),存储数据的特点相同:存储有序的.可重复的数据不同: * ...

  10. C++ primer plus读书笔记——第14章 C++中的代码重用

    第14章 C++中的代码重用 1. 使用公有继承时,类可以继承接口,可能还有实现(基类的纯虚函数提供接口,但不提供实现).获得接口是is-a关系的组成部分.而使用组合,类可以获得实现,但不能获得接口. ...