圣杯布局，很久之前就听过，但是一直都没详细了解过，最近因为做了一个项目，借鉴了薪人薪事这个公司的产品页面，才第一次用到这种布局方式。于是就花了点时间，测了下它实现常见分栏布局的代码，每段代码都非常简单，但布局效果很完美，比我以前用的方式好用不少。本文是对它实现方式的一些总结，希望可以把这种技术推荐给跟我之前一样对它比较陌生的开发人员：）
1. 从2个实际的需求说起
今年有2个项目，都是管理系统的项目，这种项目的界面特点基本都是左侧边栏显示菜单，右侧显示网页主体或者是顶部的导航栏显示菜单，导航栏以下显示网页主体，我这两个项目都是第一种类型：
项目一：
项目二：
在做项目一的时候，采用了以前做ERP软件的一些做法，右边的网页主体区域放置的是一个iframe，用来显示每个菜单点击之后的页面，这样每个菜单点击之后，外部页面都不会刷新，并且滚动也只发生在iframe里面，外部页面的菜单区域和顶部导航栏的状态始终不会改变，用户操作起来非常便捷。这种界面布局的做法非常简单，只要侧边栏和网页主体区域都采用固定定位即可：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<div class="sidebar"></div> <div class="page-content"></div> .sidebar { position: absolute; width: 200px; left: 0; bottom: 0; top: 50px; border-right: 1px solid #E7E7E7; } .page-content { position: absolute; left: 205px; bottom: 0; top: 50px; right: 0; } |
由于这个项目是一个内部项目，所以采用这种界面结构完全是可以接受的，毕竟这只是一个管理系统，可以不那么在乎用户体验什么的。最近做项目二的时候，情况就不一样了，这个项目是一个企业级的管理应用，它不再是一个单纯的管理系统，而是面向外部用户提供的参与平台业务的一个终端应用，从用户体验的角度来说，项目一那种固定死板的方式不太拿得出手给别人用，不然别人肯定会认为你的应用做的很low。相对于项目一的界面，项目二有以下特点：
1）菜单点击之后，界面是整体刷新，没有iframe了；
2）侧边栏和主体内容栏的高度都是不固定的；
3）网页滚动的时候，是页面整体滚动，而不是只滚动主体内容。
几个礼拜前，看到薪人薪事融资的新闻，心想这是个什么公司，怎么之前都没听过，做什么业务的，于是就百度了下，注册了账号，进去体验了一下它的产品，后来发现它做的其实是一个SAAS应用，界面上看是一个典型的管理系统的风格，但是整体体验还不错，当时就觉得以后说不定有参考借鉴的价值。正好上周临时安排要做项目二，根据项目一提了一些要求，于是就想到薪人薪事的应用了。只有3天时间，工作除了界面之外，还有4个业务模块的功能要完成，为了完成这个东西，界面布局完全参考了薪人薪事的做法，由于以前没用过这种布局方式，所以觉得很新奇，就专门搜集知识学习了一下，才发现这个方法就是以前听过的圣杯布局。项目二所用的布局方法就是圣杯布局方式中侧边栏固定，主体内容栏自适应的一种做法。
2. 圣杯布局的传统实现方法
利用圣杯布局的方法，可以轻松实现下面的布局效果：
下面来一一说明上图中五种布局效果的实现方法（本文相关代码下载，本部分的布局方法在代码中对应grail_layout{1,5}.html）。
1）布局一：2栏布局，侧边栏固定在左边，右侧是主体内容栏：
|
1 2 3 4 |
<div class="layout"> <aside class="layout__aside">侧边栏宽度固定</aside> <div class="layout__main">主内容栏宽度自适应</div> </div> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<style type="text/css"> .layout:after { clear: both; content: " "; display: table; } .layout__aside, .layout__main { float: left; } .layout { padding-left: 210px; } .layout__main { width: 100%; } .layout__aside { width: 200px; margin-left: -210px; } </style> |
效果是：
2）布局二：2栏布局，侧边栏固定在右边，左侧是主体内容栏：
|
1 2 3 4 |
<div class="layout"> <div class="layout__main">主内容栏宽度自适应</div> <aside class="layout__aside">侧边栏宽度固定</aside> </div> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
16 17 18 19
|
1. 从2个实际的需求说起今年有2个项目，都是管理系统的项目，这种项目的界面特点基本都是左侧边栏显示菜单，右侧显示网页主体或者是顶部的导航栏显示菜单，导航栏以下显示网页主体，我这两个项目都是第一种类型： 项目一：
项目二：
在做项目一的时候，采用了以前做ERP软件的一些做法，右边的网页主体区域放置的是一个iframe，用来显示每个菜单点击之后的页面，这样每个菜单点击之后，外部页面都不会刷新，并且滚动也只发生在iframe里面，外部页面的菜单区域和顶部导航栏的状态始终不会改变，用户操作起来非常便捷。这种界面布局的做法非常简单，只要侧边栏和网页主体区域都采用固定定位即可：
由于这个项目是一个内部项目，所以采用这种界面结构完全是可以接受的，毕竟这只是一个管理系统，可以不那么在乎用户体验什么的。最近做项目二的时候，情况就不一样了，这个项目是一个企业级的管理应用，它不再是一个单纯的管理系统，而是面向外部用户提供的参与平台业务的一个终端应用，从用户体验的角度来说，项目一那种固定死板的方式不太拿得出手给别人用，不然别人肯定会认为你的应用做的很low。相对于项目一的界面，项目二有以下特点： 1）菜单点击之后，界面是整体刷新，没有iframe了； 2）侧边栏和主体内容栏的高度都是不固定的； 3）网页滚动的时候，是页面整体滚动，而不是只滚动主体内容。 几个礼拜前，看到薪人薪事融资的新闻，心想这是个什么公司，怎么之前都没听过，做什么业务的，于是就百度了下，注册了账号，进去体验了一下它的产品，后来发现它做的其实是一个SAAS应用，界面上看是一个典型的管理系统的风格，但是整体体验还不错，当时就觉得以后说不定有参考借鉴的价值。正好上周临时安排要做项目二，根据项目一提了一些要求，于是就想到薪人薪事的应用了。只有3天时间，工作除了界面之外，还有4个业务模块的功能要完成，为了完成这个东西，界面布局完全参考了薪人薪事的做法，由于以前没用过这种布局方式，所以觉得很新奇，就专门搜集知识学习了一下，才发现这个方法就是以前听过的圣杯布局。项目二所用的布局方法就是圣杯布局方式中侧边栏固定，主体内容栏自适应的一种做法。 2. 圣杯布局的传统实现方法利用圣杯布局的方法，可以轻松实现下面的布局效果：
下面来一一说明上图中五种布局效果的实现方法（本文相关代码下载，本部分的布局方法在代码中对应grail_layout{1,5}.html）。 1）布局一：2栏布局，侧边栏固定在左边，右侧是主体内容栏：
效果是：
2）布局二：2栏布局，侧边栏固定在右边，左侧是主体内容栏：
|
