圣杯布局要求

  • 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. NNLM原理及Pytorch实现

    NNLM NNLM:Neural Network Language Model,神经网络语言模型.源自Bengio等人于2001年发表在NIPS上的<A Neural Probabilistic ...

  2. 仅用一句SQL更新整张表的涨跌幅、涨跌率

    问题场景 各大平台店铺的三项评分(物流.服务.商品)变化情况: 商品每日价格的变化记录: 股票的实时涨跌浮: 复现场景 表:主键ID,商品编号,记录时的时间,记录时的价格,创建时间. 问题:获取每个商 ...

  3. miui10 刷机

    起因 折腾一下老手机 名词解释 名称 内容 含义 REC Recovery的缩写 Android出厂时自带的恢复模式 (理解为win PE) 双清 data,cache 用户数据+系统缓存 三清 da ...

  4. hdu1501 记忆化搜索

    题意:       给你三个字符串,问你前两个能不能拼成第三个串. 思路:       直接记忆化神搜就行,思路水,看下代码就知道了.这个题目我感觉最大公共子序列dp的作法是错的,虽然有人ac了,随便 ...

  5. hdu5062 简单题

    题意:       求区间逆序数的个数,逆序数增加了个要求就是必须要是先升序在降序例如12321或者123321这样的. 思路:        水题直接写就行了,数据范围不大,估计直接求也不会超时,我 ...

  6. hdu4907 水dp 或者set

    题意:       给你一些被占用的时间点,然后有一些询问,每次输出大于等于询问时间的没被占用的最小的那个时间. 思路:       直接把所有用过的时间标记上,然后倒着更新一遍当前最小空余时间,或者 ...

  7. Python中数据类型的转换

    bytes<-->str a="hello" #str字符型 #str转换为bytes类型 b=a.encode("utf-8") 或 b=byte ...

  8. layUI form表单 防止多次点击重复提交

    //监听 弹框-变更处理备注-提交 form.on('submit(popFormSubPass)', function (data) { //防止重复点击: 单击之后提交按钮不可选,防止重复提交 v ...

  9. python分析《三国演义》，谁才是这部书的绝对主角（包含统计指定角色的方法）

    前面分析统计了金庸名著<倚天屠龙记>中人物按照出现次数并排序 https://www.cnblogs.com/becks/p/11421214.html 然后使用pyecharts,统计B ...

  10. Aliyun SSL 证书签发&安装

    目录 HTTPS SSL证书 签发 和 应用 证书购买 证书申请 证书安装 参考文档 HTTPS SSL证书 签发 和 应用 - SSL证书服务(Alibaba Cloud SSL Certifica ...