澳门在线威尼斯官方 > 威尼斯澳门在线 > 圣杯构造小结,等高分栏布局小结

原标题:圣杯构造小结,等高分栏布局小结

浏览次数:158 时间:2019-12-01

圣杯布局小结

2016/01/30 · HTML5 · 1 评论 · 圣杯布局

原文出处: 流云诸葛   

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

等高分栏布局小结

2016/02/06 · CSS · 等高分栏

原文出处: 流云诸葛   

上一篇文章《圣杯布局小结》总结了几种常见的分栏布局方法,这几个方法都可以实现多栏页面下,所有栏的高度可动态变化,某一栏宽度自适应的布局效果,能满足工作中很多布局需求。后来我在搜集更多关于分栏布局的文章时,发现了一个新的问题,这个问题在前面那篇文章中也有朋友在评论里跟我提起,就是如何在实现分栏布局的同时保证每栏的高度相同。我发现这种等高分栏布局的情况,在网站里面其实也很常见,所以本文总结了几种可用的方法来解决这个新的需求。

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

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

项目一:

图片 1

项目二:

图片 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; }

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个业务模块的功能要完成,为了完成这个东西,界面布局完全参考了薪人薪事的做法,由于以前没用过这种布局方式,所以觉得很新奇,就专门搜集知识学习了一下,才发现这个方法就是以前听过的圣杯布局。项目二所用的布局方法就是圣杯布局方式中侧边栏固定,主体内容栏自适应的一种做法。

1. 方法一:万能的flex

跟上篇文章不同,这次把flex这种方法放在了第一位,因为相比较起来,它是所有分栏布局方法里面,优点最多的,如果兼容性允许的话,很有必要在任何时候都优先使用它完成页面布局。如果你打开上篇文章,找到倒数第二部分关于flex实现分栏布局的代码,或者把上篇文章提供的代码下载下来,直接预览flex_layout.html,你会发现上篇文章的那段代码其实已经做到了等高分栏布局,同一段代码,可以实现上篇文章中提到的五种分栏布局,还可以实现本文提到的等高布局的情况,这种能力其它方法真的无法比拟。而它之所以能实现等高布局,跟一个flex的css属性有关系,这个属性是:align-item。它的默认值是:stretch,在flex item元素比如layout__main或layout__aside的高度未定义或者为auto的情况下,会拉伸flex item元素的高度或宽度,铺满flex的交叉轴,详细的原理可以通过上文提供的flex学习资源去了解,这里只做一个简单的引用说明。

2. 圣杯布局的传统实现方法

利用圣杯布局的方法,可以轻松实现下面的布局效果:

图片 3

下面来一一说明上图中五种布局效果的实现方法(本文相关代码下载,本部分的布局方法在代码中对应grail_layout{1,5}.html)。

1)布局一:2栏布局,侧边栏固定在左边,右侧是主体内容栏:

<div class="layout"> <aside class="layout__aside">侧边栏宽度固定</aside> <div class="layout__main">主内容栏宽度自适应</div> </div>

1
2
3
4
<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>

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>

效果是:

图片 4

2)布局二:2栏布局,侧边栏固定在右边,左侧是主体内容栏:

<div class="layout"> <div class="layout__main">主内容栏宽度自适应</div> <aside class="layout__aside">侧边栏宽度固定</aside> </div>

1
2
3
4
<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>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<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>

效果是:

图片 5

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>

1
2
3
4
5
<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>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<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>

效果是:

图片 6

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>

1
2
3
4
5
<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>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<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>

效果是:

图片 7

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>

1
2
3
4
5
<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>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<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>

效果是:

图片 8

PS:

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

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

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

2. 方法二:使用table或者伪table

上篇文章中还有另外两种布局方法没有介绍,第一种就是这里要说的table布局或者伪table布局。table布局用的就是table tr td这些元素去实现,相信绝大部分web开发人员在入门html时,首先接触到的布局方法肯定就是table布局了,这种方法简单高效,用它做任何分栏布局都不是问题,只是因为table的嵌套结构太多,html冗杂,又不利于DOM的操作和渲染,用来布局不符合语义,总之缺点较多,所以目前的环境下,用的情况越来越少了。伪table布局其实跟table布局类似,只不过借助于css,可以让我们不直接使用table tr td这些直接的表格元素,而是通过display: table, display: table-row, display: table-cell,改变元素的显示特性,让浏览器把这些元素当成table来渲染,这种渲染的表现跟用真实的table没有啥区别,就连那些table专用的css属性,比如table-layout,border-collapse和border-spacing,都能产生效果。table布局的方法已经很少被采用了,本文也就没必要再去介绍,但是伪table布局的方法值得学习一下,经过这两天的学习,发现伪table的方式相比直接用表格布局,有不少的优点,值得运用到工作中去。不过在说明使用伪table布局的方法之前,得先了解一些伪table相关的知识:

1)可用于伪table表现的display属性值有:

图片 9

2)当把一个元素的display属性设置成以上列出的值后,就可以把这个元素看成与该属性对应的表格元素,比如table-cell对应的就是td;同时,这个元素会拥有跟表格元素一样的特性,比如display: table或者inline-table的元素可以使用table-layout,border-collapse和border-spacing这三个原本只有table才能生效的属性;display:table-cell的元素跟td一样,对宽度高度敏感,对margin值无反应,对padding有效。

3)关于table-cell还有一点要说明的就是,它会被其他一些CSS属性破坏,例如float, position:absolute,所以这些个属性不能同时使用。

4)跟直接使用表格元素不同的是,在使用表格元素的时候需要完全遵守表格元素嵌套结构,也就是下面这种:

<table> <thead> <th></th> </thead> <tbody> <tr> <td></td> </tr> </tbody> <tfoot> <th></th> </tfoot> </table>

1
2
3
4
5
6
7
8
9
10
11
12
13
<table>
    <thead>
        <th></th>
    </thead>
    <tbody>
        <tr>
            <td></td>
        </tr>
    </tbody>
    <tfoot>
        <th></th>
    </tfoot>
</table>

而使用伪table的那些属性时,可以仅单独使用某一个属性,浏览器会在这些元素的外层包裹缺失的来保证伪table元素框嵌套结构的完整性,这些框跟常提到的行框一样都是不可见的,网上有的文章里也把这种做法叫做匿名表格。下面的这个代码中,tb-cell元素的外层没有加display: table-row和display: table的元素:

.tb-cell { display: table-cell; padding: 10px; border: 1px solid #ccc; } <div class="tb-cell">这是第1个display: table-cell;的元素。</div> <div class="tb-cell">这是第2个display: table-cell;的元素。</div>

1
2
3
4
5
6
7
8
.tb-cell {
    display: table-cell;
    padding: 10px;
    border: 1px solid #ccc;
}
 
<div class="tb-cell">这是第1个display: table-cell;的元素。</div>
<div class="tb-cell">这是第2个display: table-cell;的元素。</div>

这是第1个display: table-cell;的元素。这是第2个display: table-cell;的元素。

1
这是第1个display: table-cell;的元素。这是第2个display: table-cell;的元素。

但是看到的效果是(蓝色背景是它们父层的一个包裹元素: width: 800px;margin-left: auto;margin-right: auto):

图片 10

因为浏览器自动在这两个元素的外层,加了跟能够跟tr和table起相同作用的框,来包含这两个元素形成的框,所以这两个元素看起来就跟实际的表格效果一样。假如浏览器没有做这个处理,这两个元素之间是不可能没有间隙的,中间会有一个因为换行符显示出来的空格。这种自动添加的框都是行内框,不是块级框。

接下来看看如何通过这些伪table的属性来完成上文的分栏布局以及本文要求的等高分栏布局,玩法有很多:(本文相关源码下载)

玩法一:模拟直接用表格布局(对应源码中table_layout1.html)

这种方法的思路是布局时完全按照表格的嵌套层次来处理,把display: table, display: table-row, display: table-cell都用上,相当于就是利用完整的table来做,比如说要实现上文的布局三(3栏布局,2个侧边栏分别固定在左边和右边,中间是主体内容栏),就可以这么干:

<div class="layout"> <div class="layout__row"> <aside class="layout__col layout__aside layout__aside--left">左侧边栏宽度固定</aside> <div class="layout__col layout__main">内容栏宽度自适应<br>高度增加一点,旁边的高度都会自动增加</div> <aside class="layout__col layout__aside layout__aside--right">右侧边栏宽度固定</aside> </div> </div>

1
2
3
4
5
6
7
<div class="layout">
    <div class="layout__row">
        <aside class="layout__col layout__aside layout__aside--left">左侧边栏宽度固定</aside>
        <div class="layout__col layout__main">内容栏宽度自适应<br>高度增加一点,旁边的高度都会自动增加</div>
        <aside class="layout__col layout__aside layout__aside--right">右侧边栏宽度固定</aside>
    </div>
</div>

<style type="text/css"> .layout { display: table; width: 100%; } .layout__row { display: table-row; } .layout__col { text-align: center; display: table-cell; } .layout__col + .layout__col { border-left: 10px solid #fff; } .layout__main { background-color: #4DBCB0; } .layout__aside { width: 200px; background-color: #daf1ef; } </style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<style type="text/css">
    .layout {
        display: table;
        width: 100%;
    }
    .layout__row {
        display: table-row;
    }
    .layout__col {
        text-align: center;
        display: table-cell;
    }
    .layout__col + .layout__col {
        border-left: 10px solid #fff;
    }
    .layout__main {
        background-color: #4DBCB0;
    }
    .layout__aside {
        width: 200px;
        background-color: #daf1ef;
    }
</style>

效果还是那个效果,而且天生支持等高布局:

图片 11

这个布局原理跟使用table是完全一样的,所以使用起来非常容易(以上提供的是针对上文布局三的实现,其它四个布局的实现不会再一一介绍了,源码里面也不会提供,因为相对比较简单)。

这种伪table布局有什么特点呢:

1)相比直接用表格元素,这种做法不需要考虑语义,表格元素是有语义的,主要是用来显示网页上列表型的数据内容,虽然可以完成布局,但是布局结构都是没有语义的,所以直接用表格不合适,而这种伪table布局的特点就是:它没有语义,但是可以像表格那样布局;

2)html的层次结构相比直接用table元素也要简单一些,我们这里只用到了3层,直接用table元素的话可能还有tbody这一层;

3)相比上文提到的那些布局方法,如圣杯布局和双飞翼布局,这个做法在css方面相对简单,在html方面也只多了一层嵌套;

4)缺点是分栏之间的间隔不能用margin和padding来做,如果用margin,这个属性在display: table-cell的元素上根本不会生效;如果用padding,那像demo里面各栏的背景色就都会连到一块,做不出间隔的效果,如果在layout__col里面再嵌套一层,在这一层设置背景色的话,又会增加html的层次,也不是很好。我这里是投了个巧,用border处理了一下。

玩法二:去掉display: table-row(对应源码中的table_layout2.html)

前面说过,浏览器会用匿名表格的方式,添加缺失的框,所以玩法一中的代码,把layout-row完全去掉,一点都不影响布局效果:

div class="layout"> aside class="layout__col layout__aside layout__aside--left">左侧边栏宽度固定aside> div class="layout__col layout__main">内容栏宽度自适应br>高度增加一点,旁边的高度都会自动增加div> aside class="layout__col layout__aside layout__aside--right">右侧边栏宽度固定aside> div>

1
2
3
4
5
div class="layout">
    aside class="layout__col layout__aside layout__aside--left">左侧边栏宽度固定aside>
    div class="layout__col layout__main">内容栏宽度自适应br>高度增加一点,旁边的高度都会自动增加div>
    aside class="layout__col layout__aside layout__aside--right">右侧边栏宽度固定aside>
div>

style type="text/css"> .layout { display: table; width: 100%; } .layout__col { text-align: center; display: table-cell; } .layout__col + .layout__col { border-left: 10px solid #fff; } .layout__main { background-color: #4DBCB0; } .layout__aside { width: 200px; background-color: #daf1ef; } style>

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 {
        display: table;
        width: 100%;
    }
    .layout__col {
        text-align: center;
        display: table-cell;
    }
    .layout__col + .layout__col {
        border-left: 10px solid #fff;
    }
    .layout__main {
        background-color: #4DBCB0;
    }
    .layout__aside {
        width: 200px;
        background-color: #daf1ef;
    }
style>

玩法三:去掉display: table(对应源码中的table_layout3.html)

根据玩法二,可以试想一下是否能再把display: table这一个属性给去掉,反正浏览器还会再添加框来包裹:

<div class="layout"> <aside class="layout__col layout__aside layout__aside--left">左侧边栏宽度固定</aside> <div class="layout__col layout__main">内容栏宽度自适应<br>高度增加一点,旁边的高度都会自动增加</div> <aside class="layout__col layout__aside layout__aside--right">右侧边栏宽度固定</aside> </div>

1
2
3
4
5
<div class="layout">
    <aside class="layout__col layout__aside layout__aside--left">左侧边栏宽度固定</aside>
    <div class="layout__col layout__main">内容栏宽度自适应<br>高度增加一点,旁边的高度都会自动增加</div>
    <aside class="layout__col layout__aside layout__aside--right">右侧边栏宽度固定</aside>
</div>

<style type="text/css"> .layout__col { text-align: center; display: table-cell; } .layout__col + .layout__col { border-left: 10px solid #fff; } .layout__main { background-color: #4DBCB0; } .layout__aside { width: 200px; min-width: 200px; background-color: #daf1ef; } </style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<style type="text/css">
    .layout__col {
        text-align: center;
        display: table-cell;
    }
    .layout__col + .layout__col {
        border-left: 10px solid #fff;
    }
    .layout__main {
        background-color: #4DBCB0;
    }
    .layout__aside {
        width: 200px;
        min-width: 200px;
        background-color: #daf1ef;
    }
</style>

效果是:

图片 12

这个并没有达到我们的效果,因为我需要主体内容栏能够自适应宽度。产生这个效果的原因是什么,就是因为没有加显示display: table这一层,浏览器自动加了一个框,不过这个框是行内框,导致主体内容栏显示的宽度就跟内容的宽度一致了。为了解决这个问题,可以这么干,html结构不变,css稍加改动:

.layout__main { width: 3000px; background-color: #4DBCB0; } .layout__aside { width: 200px; min-width: 200px; background-color: #daf1ef; }

1
2
3
4
5
6
7
8
9
10
.layout__main {
    width: 3000px;
    background-color: #4DBCB0;
}
 
.layout__aside {
    width: 200px;
    min-width: 200px;
    background-color: #daf1ef;
}

关键的代码就是红色新增的那两行,首先给主体内容栏设置一个很长的宽度,而且只能用具体的长度设置,不能用百分比,然后给侧边栏设置一个最小宽度,免得主体内容栏把侧边栏的宽度给挤掉了。这个原理就是因为display: table-cell的作用,导致layout__main跟layout__aside表现出跟td元素一样的特性,td默认的宽度就是可自动调整的,即使宽度设置的很大,也不会撑破table的宽度,这里虽然那个自动添加的框看不到,但是这个框的最大宽度也就是浏览器的宽度,layout__main不会打破这个宽度的,所以可以放心使用。

玩法四:去掉layout这一层包裹元素(对应源码:table_layout4.html)

如果网站比较简单,去掉layout这一层包裹元素也是可以的:

<header>顶部</header> <aside class="layout__col layout__aside layout__aside--left">左侧边栏宽度固定</aside> <div class="layout__col layout__main">内容栏宽度自适应<br>高度增加一点,旁边的高度都会自动增加</div> <aside class="layout__col layout__aside layout__aside--right">右侧边栏宽度固定</aside> <footer>底部</footer>

1
2
3
4
5
<header>顶部</header>
<aside class="layout__col layout__aside layout__aside--left">左侧边栏宽度固定</aside>
<div class="layout__col layout__main">内容栏宽度自适应<br>高度增加一点,旁边的高度都会自动增加</div>
<aside class="layout__col layout__aside layout__aside--right">右侧边栏宽度固定</aside>
<footer>底部</footer>

<style type="text/css"> .layout__col { text-align: center; display: table-cell; line-height: 50px; } .layout__col + .layout__col { border-left: 10px solid #fff; } .layout__main { width: 3000px; background-color: #4DBCB0; } .layout__aside { width: 200px; min-width: 200px; background-color: #daf1ef; } </style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<style type="text/css">
    .layout__col {
        text-align: center;
        display: table-cell;
        line-height: 50px;
    }
    .layout__col + .layout__col {
        border-left: 10px solid #fff;
    }
    .layout__main {
        width: 3000px;
        background-color: #4DBCB0;
    }
    .layout__aside {
        width: 200px;
        min-width: 200px;
        background-color: #daf1ef;
    }
</style>

以上四种做法都能实现我们想要的分栏等高布局,兼容性方面,不考虑IE8及以下,其它浏览器几乎没有问题。

由于匿名表格的作用,导致采用伪table布局的方法变得非常简洁,上文之所以没提到这个做法,是因为完全不知道有匿名表格这回事,我也是写这篇文章才学习到的,学完之后,发现又找到了一个做分栏布局的好办法,希望前面的这些介绍能帮助你掌握好这个用法。实际上伪table的这些属性,尤其是table-cell,用途非常多,本文没有办法一一介绍,但是能提供一个思路,将来工作中也许有很多其它布局场景,我们都可以想想用table-cell来处理。

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>

1
2
3
4
5
6
<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>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<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才行,相对要复杂一点。

3. 方法三:使用绝对定位

上文没有介绍的另外一种分栏布局方法就是这里要介绍的绝对定位。之所以没介绍这个方法,是因为上文介绍的都是分栏自适应布局的方法,而绝对定位的做法,不能完全做到我们想要的分栏自适应布局,分栏自适应有两个原则:第一是主体内容栏宽度自适应,这点绝对定位是可以做到的;第二点是所有栏的高度都能动态变化,并且不能导致父容器高度塌陷,不能在各栏内部出现滚动或溢出的情况,这点绝对定位不容易做到适用所有场景。而本文又把这种布局方法拿出来介绍,是因为绝对定位做等高布局很容易,所以用绝对定位做等高分栏布局是一种可行的办法,只是这种方法适用的场景有一些限制,需要根据实际情况考虑是否要采用。

做法一:所有栏都采用绝对定位(对应源码中absolute_layout1.html)

<header>顶部</header> <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> <footer>底部</footer>

1
2
3
4
5
6
7
<header>顶部</header>
<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>
<footer>底部</footer>

<style type="text/css"> .layout { height: 300px; position: relative; } .layout__aside, .layout__main { position: absolute; top: 0; bottom: 0; } .layout__main { left: 210px; right: 210px; } .layout__aside { width: 200px; } .layout__aside--left { left: 0; } .layout__aside--right { right: 0; } </style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<style type="text/css">
    .layout {
        height: 300px;
        position: relative;
    }
    .layout__aside, .layout__main {
        position: absolute;
        top: 0;
        bottom: 0;
    }
    .layout__main {
        left: 210px;
        right: 210px;
    }
    .layout__aside {
        width: 200px;
    }
    .layout__aside--left {
        left: 0;
    }
    .layout__aside--right {
        right: 0;
    }
</style>

效果:

图片 13

这种布局方法的特点是:

1)主体内容栏是自适应的;

2)所有栏完全等高,效果跟flex布局和伪table布局的效果一样;

从这两点来看,这种绝对定位的方法还是比较好用的,不过它有一个非常大的使用限制,就是父元素的高度没有办法通过它的内部元素给撑起来,要用的话,必须想办法让父元素有高度,适合做父元素高度可知或者全屏布局。比如以下这个代码就是全屏布局的一个例子(对应源码中absolute_layout2.html):

header>顶部header> 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> footer>底部footer>

1
2
3
4
5
6
7
header>顶部header>
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>
footer>底部footer>

<style type="text/css"> html,body { margin: 0; height: 100%; } footer { position: absolute; bottom: 0; width: 100%; } .layout { width: 100%; position: absolute; top: 50px; bottom: 50px; } .layout__aside, .layout__main { position: absolute; top: 0; bottom: 0; } .layout__main { left: 210px; right: 210px; } .layout__aside { width: 200px; } .layout__aside--left { left: 0; } .layout__aside--right { right: 0; } </style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<style type="text/css">
    html,body {
        margin: 0;
        height: 100%;
    }
    footer {
        position: absolute;
        bottom: 0;
        width: 100%;
    }
    .layout {
        width: 100%;
        position: absolute;
        top: 50px;
        bottom: 50px;
    }
    .layout__aside, .layout__main {
        position: absolute;
        top: 0;
        bottom: 0;
    }
    .layout__main {
        left: 210px;
        right: 210px;
    }
    .layout__aside {
        width: 200px;
    }
    .layout__aside--left {
        left: 0;
    }
    .layout__aside--right {
        right: 0;
    }
</style>

效果:

图片 14

做法二:侧边栏绝对定位,主体内容栏保持流式布局(对应源码中absolute_layout3.html)

<div class="layout"> <aside class="layout__aside layout__aside--left">左侧边栏宽度固定</aside> <div class="layout__main">内容栏宽度自适应<br>高度增加一点,旁边的高度都会自动增加</div> <aside class="layout__aside layout__aside--right">右侧边栏宽度固定</aside> </div>

1
2
3
4
5
<div class="layout">
    <aside class="layout__aside layout__aside--left">左侧边栏宽度固定</aside>
    <div class="layout__main">内容栏宽度自适应<br>高度增加一点,旁边的高度都会自动增加</div>
    <aside class="layout__aside layout__aside--right">右侧边栏宽度固定</aside>
</div>

<style type="text/css"> .layout { position: relative; } .layout__aside { position: absolute; top: 0; bottom: 0; } .layout__main { margin: 0 210px; } .layout__aside { width: 200px; } .layout__aside--left { left: 0; } .layout__aside--right { right: 0; } </style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<style type="text/css">
    .layout {
        position: relative;
    }
    .layout__aside {
        position: absolute;
        top: 0;
        bottom: 0;
    }
    .layout__main {
        margin: 0 210px;
    }
    .layout__aside {
        width: 200px;
    }
    .layout__aside--left {
        left: 0;
    }
    .layout__aside--right {
        right: 0;
    }
</style>

效果:

图片 15

这个方法的特点是:

1)主体内容栏是宽度自适应的;

2)所有栏也是完全等高的;

上面的代码中,layout__main通过magin来给侧边栏留出空间,其实也可以在layout元素上添加padding来处理,作用是一样的。这个方法相比前一个方法好一点的是,父元素的高度可以通过主体内容栏给撑起来,不过由此也带来了一个新问题,就是内容栏高度不够的时候,侧边栏就会出现溢出或者滚动,解决这个新问题的办法有2个:第一,如果侧边栏的内容都是已知的,并且没有折叠展开这种会改变侧边栏内容高度的功能,那么可以给layout设置一个min-height来处理;第二,如果侧边栏的内容是动态的,除了给layout加min-height之外,还得在每次改变侧边栏内容的时候,主动去调整主体内容栏的高度,如果主体内容栏的高度小于侧边栏的高度,就要更新主体内容栏的高度。不过如果你的内容栏的内容很多,侧边栏内容较少的话,就不用考虑这个新问题了。

绝对定位的做法就是这样,第一种限制较高;第二种稍微强一些,在一些场景下,可能还得借助JS来处理,所以综合起来不算是一个非常好的方式。只有你的布局需求恰好满足它的条件时,可能才会考虑使用它,就像上文中我提出的项目一的需求,就一定要用绝对定位的布局来做。

本文由澳门在线威尼斯官方发布于威尼斯澳门在线,转载请注明出处:圣杯构造小结,等高分栏布局小结

关键词:

上一篇:jQuery技能总计,前端开辟幼功

下一篇:没有了