圣杯布局要求

  • 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. Pandas——Series and DataFrane

    数据科学--pandas库 pandas中有两个主要的数据结构,一个是Series,另一个是DataFrame.通过这两类数据,可以下载数据.可视化数据.和分析数据. Pandas安装:pip ins ...

  2. 16- web测试总结

    在线用户不进行任何操作,对服务器也会产生压力.因为有会话的存在. 服务器tps与相应时间没有直接关系:每个口 关键性能指标:TPS.响应时间.并发数.思考时间.资源利用率(内存.cpu.磁盘).pv. ...

  3. hdu3714 水三分

    题意:       给你一些函数 y = ax^2 + bx + c,的a >= 0 的二次函数,x的范围是0--1000, 问你在这个范围内函数值最大的最小是多少,最大指的是对于某一个x最大的 ...

  4. Metasploit Framework(MSF)的使用

    目录 Metasploit 安装Metasploit 漏洞利用(exploit) 攻击载荷(payload) Meterpreter MS17_010(永恒之蓝) 辅助模块(探测模块) 漏洞利用模块 ...

  5. C#-FTP

    /// <summary> /// 上传文件 /// </summary> /// <param name="fileinfo">需要上传的文件 ...

  6. Windows Pe 第三章 PE头文件-EX-相关编程-1（PE头内容获取）

    获取pE头相关的内容,就是类似如下内容 原理:比较简单,直接读取PE到内存,然后直接强转就行了. #include <windows.h> #include <stdio.h> ...

  7. Linux-鸟菜-7-Linux文件系统-EXT

    Linux-鸟菜-7-Linux文件系统-EXT Linux最传统的磁盘文件系统(filesystem)使用的是EXT2,所以先从EXT2开始了解. /dev/sd[a-p][1-128]  为实体磁 ...

  8. 【JavaScript】Leetcode每日一题-二叉搜索树的范围和

    [JavaScript]Leetcode每日一题-二叉搜索树的范围和 [题目描述] 给定二叉搜索树的根结点 root,返回值位于范围 [low, high] 之间的所有结点的值的和. 示例1: 输入: ...

  9. SpringJUnit4ClassRunner requires JUnit 4.12 or higher

    报错:需要Junit 4.12 或者更高的版本 原因:查看pom.xml文件引入的Junit版本为4.11 解决办法:修改Junit版本为4.12即可

  10. Markdown编辑器怎么用

    Markdown编辑器怎么用 1.代码块 快速创建一个代码块 // 语法: // ```+语言名称,如```java,```c++ 2.标题 语法:#+空格+标题名字,一个#表示一级标题,两个#表示二 ...