圣杯布局要求

  • 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. 【C++】从零开始，只使用FFmpeg，Win32 API，实现一个播放器（一）

    前言 起初只是想做一个直接读取视频文件然后播放字符动画的程序.我的设想很简单,只要有现成的库,帮我把视频文件解析成一帧一帧的原始画面信息,那么我只需要读取里面的每一个像素的RGB数值,计算出亮度,然后 ...

  2. C++ 2.0新特性

    C++ standard之演化 C++ 98(1.0) C++ 03(TR1, technical Report 1) // 一个实验性的版本 C++ 11(2.0) C++ 14 此次记录涵盖了C+ ...

  3. MYSQL中TIMESTAMP类型的默认值理解

    MYSQL中TIMESTAMP类型可以设定默认值,就像其他类型一样. 1.自动UPDATE 和INSERT 到当前的时间:表:----------- Table   Create Table      ...

  4. 【JDK8】Java8 LocalDate操作时间和日期的API

    时间项目中的涉及到的时间处理非常多,犹豫SimpleDateFormat的不安全性以及Calendar等类在计算时比较复杂, 往往我们都会使用工具类来封装较多的日期处理函数, 但是JDK8中新增了操作 ...

  5. 安全之路 —— 无DLL文件实现远程进程注入

    简介 在之前的章节中,笔者曾介绍过有关于远程线程注入的知识,将后门.dll文件注入explorer.exe中实现绕过防火墙反弹后门.但一个.exe文件总要在注入时捎上一个.dll文件着实是怪麻烦的,那 ...

  6. DVWA之 SQL Injection(Blind)

    SQL Injection(Blind) SQL Injection(Blind),即SQL盲注,与一般注入的区别在于,一般的注入攻击者可以直接从页面上看到注入语句的执行结果,而盲注时攻击者通常是无法 ...

  7. c#-全局键盘钩子

    using System; using System.Collections.Generic; using System.Text; using System.Windows.Forms; using ...

  8. C++ 三消游戏基本实现

    最近在研究三消算法,我想试试在完全不借助网络资源的情况下搞定这个东西,所以有些地方可能不是最优的. 代码留此备忘. 1. 3x_desk_event.h 1 #pragma once 2 3 #ifn ...

  9. Java中读取文件的几种路径配置

    获取配置文件的两种方式区别 ClassLoader.getSystemClassLoader().getResourceAsStream() //ClassLoader.getSystemClassL ...

  10. Xshell、Xftp评估过期的解决办法

    介绍一个     FTP客户端-IIS7服务器管理工具作为FTP客户端,它支持批量管理ftp站点.定时上传和定时下载,定时备份,且操作简洁.同时iis7服务器管理工具还是vnc客户端.并且支持批量管理 ...