微信号:FrontDev

介绍:分享 Web 前端相关的技术文章、工具资源、精选课程、热点资讯

圣杯布局小结

2016-02-04 20:48 前端大全

(点击上方,可快速关注)

来源:流云诸葛

网址:http://www.cnblogs.com/lyzg/p/5160570.html


圣杯布局,很久之前就听过,但是一直都没详细了解过,最近因为做了一个项目,借鉴了薪人薪事这个公司的产品页面,才第一次用到这种布局方式。于是就花了点时间,测了下它实现常见分栏布局的代码,每段代码都非常简单,但布局效果很完美,比我以前用的方式好用不少。本文是对它实现方式的一些总结,希望可以把这种技术推荐给跟我之前一样对它比较陌生的开发人员:)


1. 从2个实际的需求说起


今年有2个项目,都是管理系统的项目,这种项目的界面特点基本都是左侧边栏显示菜单,右侧显示网页主体或者是顶部的导航栏显示菜单,导航栏以下显示网页主体,我这两个项目都是第一种类型:


项目一:



项目二:



在做项目一的时候,采用了以前做ERP软件的一些做法,右边的网页主体区域放置的是一个iframe,用来显示每个菜单点击之后的页面,这样每个菜单点击之后,外部页面都不会刷新,并且滚动也只发生在iframe里面,外部页面的菜单区域和顶部导航栏的状态始终不会改变,用户操作起来非常便捷。这种界面布局的做法非常简单,只要侧边栏和网页主体区域都采用固定定位即可:


<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栏布局,侧边栏固定在左边,右侧是主体内容栏:


<div class="layout">

    <aside class="layout__aside">侧边栏宽度固定</aside>

    <div class="layout__main">主内容栏宽度自适应</div>

</div>


<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栏布局,侧边栏固定在右边,左侧是主体内容栏:


<div class="layout">

    <div class="layout__main">主内容栏宽度自适应</div>

    <aside class="layout__aside">侧边栏宽度固定</aside>

</div>


<style type="text/css">

    .layout:after {

        clear: both;

        content: " ";

        display: table;

    }

    .layout {

        padding-right: 210px;

    }

    .layout__main {

        width: 100%;

        float: left;

    }

    .layout__aside {

        float: right;

        width: 200px;

        margin-right: -210px;

    }

</style>


效果是:



3)布局三:3栏布局,2个侧边栏分别固定在左边和右边,中间是主体内容栏:


<div class="layout">

    <aside class="layout__aside layout__aside--left">左侧边栏宽度固定</aside>

    <div class="layout__main">主内容栏宽度自适应</div>

    <aside class="layout__aside layout__aside--right">右侧边栏宽度固定</aside>

</div>


<style type="text/css">

    .layout:after {

        clear: both;

        content: " ";

        display: table;

    }

    .layout__aside, .layout__main {

        float: left;

    }

    .layout {

        padding:0 210px;

    }

    .layout__main {

        width: 100%;

    }

    .layout__aside {

        width: 200px;

    }

    .layout__aside--left {

        margin-left: -210px;

    }

    .layout__aside--right {

        margin-right: -210px;

        float: right;

    }

</style>


效果是:



4)布局四:3栏布局,2个侧边栏同时固定在左边,右边是主体内容栏:


<div class="layout">

    <aside class="layout__aside layout__aside--first">1个侧边栏宽度固定</aside>

    <aside class="layout__aside layout__aside--second">2个侧边栏宽度固定</aside>

    <div class="layout__main">主内容栏宽度自适应</div>

</div>


<style type="text/css">

    .layout:after {

        clear: both;

        content: " ";

        display: table;

    }

    .layout__aside, .layout__main {

        float: left;

    }

    .layout {

        padding-left: 420px;

    }

    .layout__main {

        width: 100%;

    }

    .layout__aside {

        width: 200px;

    }

    .layout__aside--first {

        margin-left: -420px;

    }

    .layout__aside--second {

        margin-left: -210px;

    }

</style>


效果是:



5)布局五:3栏布局,2个侧边栏同时固定在右边,左边是主体内容栏:


<div class="layout">

    <div class="layout__main">主内容栏宽度自适应</div>

    <aside class="layout__aside layout__aside--first">1个侧边栏宽度固定</aside>

    <aside class="layout__aside layout__aside--second">2个侧边栏宽度固定</aside>

</div>


<style type="text/css">

    .layout:after {

        clear: both;

        content: " ";

        display: table;

    }

    .layout {

        padding-right: 420px;

    }

    .layout__main {

        width: 100%;

        float: left;

    }

    .layout__aside {

        width: 200px;

        float: right;

    }

    .layout__aside--first {

        margin-right: -210px;

    }

    .layout__aside--second {

        margin-right: -420px;

    }

</style>


效果是:



PS:


1)本文提供的这个布局方法,比网上看到的更加简洁一些,主要是因为不考虑兼容IE8及以下,不考虑把layout__main这个元素放在最前面,虽然经典的做法都要求把layout__main做法放在前面,这样可以让网页主体内容优先渲染,我认为这种考虑是完全多余的,2个元素的渲染顺序不同,实际上的用户体验差别又有多大呢,为了一个肉眼看不到的差异,而采用更复杂的做法,不值得;


2)css布局类的命名采用了BEM的命名规则,这个可以帮助你写出结构化,规范化的css,有兴趣的可以去了解:


http://www.zhihu.com/question/21935157


3)在使用以上方法时,需注意html结构中layout__main与layout__aside的顺序;


3. 圣杯布局传统实现方法的一种变体


第2部分介绍的方法,使用诀窍是:


1)layout元素根据分栏布局的要求设置合适的padding,比如布局一,需配置padding-left;


2)layout__main和layout__aside元素都需要浮动,layout__main需配置float: left;layout__aside需根据分栏布局要求配置合适的float值,比如布局一,需配置为float: left;而布局二需配置float: right;


3)layout__main和layout__aside的顺序也很关键,具体内容可对比前面五种布局的html;


4)layout__aside需根据分栏布局要求,配置合适的margin-left或margin-right,比如布局一,需配置margin-left;布局二需配置margin-right。


虽然我不喜欢一定要坚持把layout__main放在前面,但是从第2部分这种方法的思路,衍生出的另外一种方法,却不得不要求始终把layout__main放在最前面,这种变体做法,也被称之为双飞翼布局。下面来看看双飞翼布局的实现方法(考虑到篇幅问题,本处仅提供布局三的代码,要想了解五种布局的详细方法,可以通过在第2部分提供的下载链接下载源码去了解,本部分的布局方法在代码中对应wing_layout{1,5}.html)


1)布局三:3栏布局,2个侧边栏分别固定在左边和右边,中间是主体内容栏:


<div class="layout__main-wrapper">

    <div class="layout__main">主内容栏宽度自适应</div>

</div>

<aside class="layout__aside layout__aside--left">左侧边栏宽度固定</aside>

<aside class="layout__aside layout__aside--right">右侧边栏宽度固定</aside>

<footer class="clear">底部</footer>


<style type="text/css">

    .clear {

        clear: both;

    }

    .layout__main-wrapper,.layout__aside {

        float: left;

    }

    .layout__main-wrapper {

        width: 100%;

    }

    .layout__main {

        margin: 0 210px;

    }

    .layout__aside {

        width: 200px;

    }

    .layout__aside--left {

        margin-left: -100%;

    }

    .layout__aside--right {

        margin-left: -200px;

    }

</style>


这段代码的效果与第2部分布局三的效果一样,这种布局的诀窍是:


1)可以没有layout这一层包裹元素;


2)浮动清除需在外部元素上处理;


3)float和margin属性的设置方向相对统一,基本都是一个方向即可;


4)布局四和布局五实现起来,双飞翼布局还需要借助position:relative才行,相对要复杂一点。


4. 圣杯布局的纯浮动实现


前面两种方法都有2个共同点:


1)layout__main或layout__main-wrapper和layout__aside都会同时浮动;


2)都得借助负值属性实现。


其实还存在一种更加简洁的做法,不需要浮动layout__main或layout__main-wrapper,也不需要借助负值属性,只要浮动layout__aside,给layout__main加上合适的margin值,就可以利用浮动元素的特性,完成想要的分栏布局效果。还是以布局三为例,说明这种方式,其它方式可以从源码中查看,对应的是float_layout{1,5}.html:


<aside class="layout__aside layout__aside--left">左侧边栏宽度固定</aside>

<aside class="layout__aside layout__aside--right">右侧边栏宽度固定</aside>

<div class="layout__main">主内容栏宽度自适应</div>

<footer class="clear">底部</footer>


<style type="text/css">

    .clear {

        clear: both;

    }

 

    .layout__main {

        margin: 0 210px;

    }

 

    .layout__aside--left {

        width: 200px;

        float: left;

    }

 

    .layout__aside--right {

        width: 200px;

        float: right;

    }

</style>


这段代码的效果与第2部分布局三的效果一样,这种方法的特点是:


1)清除浮动需借助外部元素;


2)layout__main上面不能使用clear属性。


5. 圣杯布局的flex实现


flex布局是一种新的网页布局方式,目前的兼容性如下:



如果你还没有了解过flex布局,建议你赶紧去学习,虽然它在pc上兼容性还有点问题,但是在移动端已经完全没有问题了,微信官方推出的weui这个框架就大量地使用了这种布局,以下是2个学习这种布局方式的非常好的资源:


http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html


http://www.ruanyifeng.com/blog/2015/07/flex-examples.html


flex布局即将成为网页布局的首选方案,当你看到用flex来实现圣杯布局的代码有多简单的时候,你就会觉得前面那句话一点都没错。使用flex,可以只用同一段css实现第2部分提到的五种布局:


<div class="layout">

    <aside class="layout__aside">侧边栏宽度固定</aside>

    <div class="layout__main">主内容栏宽度自适应</div>

</div>

<div class="layout">

    <div class="layout__main">主内容栏宽度自适应</div>

    <aside class="layout__aside">侧边栏宽度固定</aside>

</div>

<div class="layout">

    <aside class="layout__aside">左侧边栏宽度固定</aside>

    <div class="layout__main">主内容栏宽度自适应</div>

    <aside class="layout__aside">右侧边栏宽度固定</aside>

</div>

<div class="layout">

    <aside class="layout__aside">1个侧边栏宽度固定</aside>

    <aside class="layout__aside">2个侧边栏宽度固定</aside>

    <div class="layout__main">主内容栏宽度自适应</div>

</div>

<div class="layout">

    <div class="layout__main">主内容栏宽度自适应</div>

    <aside class="layout__aside">1个侧边栏宽度固定</aside>

    <aside class="layout__aside">2个侧边栏宽度固定</aside>

</div>


<style type="text/css">

    .layout {

        display: flex;

    }

    .layout__main {

        flex: 1;

    }

    .layout__aside {

        width: 200px;

    }

    .layout > .layout__aside:not(:first-child),

    .layout > .layout__main:not(:first-child){

        margin-left: 10px;

    }

</style>


效果与第2部分每种布局做法的结果一模一样,但是代码减少了很多,而且适用的场景更多,比如4栏布局,5栏布局。


7. 结束语


本文提供了4种圣杯布局的方法,每种方法在当前或者将来的工作中,肯定会有很多场景都需要使用,所以有必要完全掌握这些方法,内容不多,也不复杂,希望能对你有用,谢谢阅读:)


补充:原本只想介绍圣杯布局这一种方法,后来觉得这样的内容有点粗糙,于是又专门去学习了另外2种分栏布局的方法,补充到了文章里面(也就是第3、4部分),所以文章虽然题为圣杯布局,但实际上讲的是分栏布局的常用方法,只有第2部分才能算是准确的圣杯布局的内容。由于本文在发布前后编辑了多次,导致标题跟内容有些脱节,请勿见怪:(




本文属于「前端大全」CSS 分类。

回复 CSS 查看更多 CSS 技术干货。




【今日微信公号推荐↓】


 
前端大全 更多文章 5个典型的JavaScript面试题(上) Limu:JavaScript的那些书 Web开发:我希望得到的编程学习路线图 JavaScript基础工具清单 常用排序算法之JavaScript实现
猜您喜欢 Gartner:公共部门首席信息官有能力引领一场市民服务革命 iOS开发之地图与定位 不能再任性了!睡眠网站、僵尸网站……政府官网怎么破? 信息检索(一)- 入门篇 定性资料分析和工具实践分享