圣杯布局要求

  • 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. SpringCloud（六）Bus消息总线

    Bus 消息总线 概述 分布式自动刷新配置功能 Spring Cloud Bus 配合 Spring Cloud Config使用可以实现配置的动态刷新 Bus支持两种消息代理:RabbitMQ和Ka ...

  2. 转载：Windows使用tail -f 监控文件

    https://www.cnblogs.com/my-bambi/p/11793770.html

  3. 【网络协议】 RPC vs Http

  4. POJ 1386 欧拉路的判定

    题意:       给你n个单词,问你有没有一种排列方式可以所有单词的首部是相邻单词的尾部. 思路:       这个题目还挺基础的,就是个欧拉的判定,首先对于每一个单词,我们把他抽象成边,每个单词两 ...

  5. Windows Server中企业证书服务的安装

    目录 企业证书服务的安装 证书服务的应用 企业证书服务的安装 企业证书服务是基于域的,所以需要该服务器是域控服务器. 添加角色,勾选 Active Directory 证书服务 然后后面的一直下一步, ...

  6. Win64 驱动内核编程-11.回调监控进线程句柄操作

    无HOOK监控进线程句柄操作 在 NT5 平台下,要监控进线程句柄的操作. 通常要挂钩三个API:NtOpenProcess.NtOpenThread.NtDuplicateObject.但是在 VI ...

  7. 8.PHP图像处理

    PHP图像处理 GD2 Jpgraph 创建一个画布: <?php    header('content-type:image/gif');    //echo "你好";  ...

  8. Docker安装和helloworld

    0.基本简介(想直接实操,直接跳过去看1就好) Docker 在容器的基础上,进行了进一步的封装,从文件系统.网络互联到进程隔离等等,极大的简化了容器的创建和维护.使得 Docker 技术比虚拟机技术 ...

  9. ColyseusJS 轻量级多人游戏服务器开发框架 - 中文手册（下）

    快速上手多人游戏服务器开发.后续会基于 Google Agones,更新相关 K8S 运维.大规模快速扩展专用游戏服务器的文章.拥抱️原生 Cloud-Native! 系列 ColyseusJS 轻量 ...

  10. 标签页切换title改变

    js实现如下 并将代码加入博客侧边栏就成了 <script> document.addEventListener("visibilitychange", functio ...