码迷,mamicode.com
首页 > 其他好文 > 详细

三种方式实现圣杯布局

时间:2019-12-28 13:03:19      阅读:113      评论:0      收藏:0      [点我收藏+]

标签:自动   左移   常见   cad   接下来   包装   三种方式   底部   自动填充   

圣杯布局是一种很常见的css布局。要求:

  • 上部和下部各自占领屏幕所有宽度。
  • 上下部之间的部分是一个三栏布局。
  • 三栏布局两侧宽度不变,中间部分自动填充整个区域。
  • 中间部分的高度是三栏中最高的区域的高度。

我会用三种方法来实现圣杯布局,分别是浮动,flexbox以及css grid:

HTML内容:

<div class="header">这里是头部</div>
<div class="container">
    <div class="middle">中间部分</div>
    <div class="left">左边</div>
    <div class="right">右边</div>
</div>
<div class="footer">这里是底部</div>

浮动:

1.填充三栏

这一步骤,首先给底部区域清除浮动,防止跟随上边的区域一起浮动。
另外:把中,左,右三个区域设置成度浮动。给左右两块区域固定的宽度,中间部分的宽度设置成100%。

这样实现下来,因为浮动的关系,[middle]会占据[container]的所有部分,而左右两块区域都会被挤到下面,但是,由于第一步设置了内边距的关系,[container]的左右各剩余了一块区域,且宽度与左右区域相同。

.header,.footer{
    height:40px;
    width:100%;
    background:red;
}
.footer{
    clear:both;
}
.container{
    padding-left:200px;
    padding-right:300px;
}
.container div{
    float:left;
}
.middle{
    width:100%;
    background:yellow;
}
.left{
    width:200px;
    background:pink;
}
.right{
    width:300px;
    background:aqua;
}

2.移动左侧区域

接下来要做的就是把左右两块区域挪到空出来的内边距空间里去。

先移动左边,新加一个样式 margin-left:-100%。这样一来,因为浮动关系,就把左边块上移到了[middle]左侧,与其交织在一起,而右侧栏就自动往左移动。然后再给左侧栏一个偏移量,偏移量恰好是其宽度,这一步要给[container]的position设成relative

.header,.footer{
    height:40px;
    width:100%;
    background:red;
}
.footer{
    clear:both;
}
.container{
    padding-left:200px;
    padding-right:300px;
}
.container div{
    postion:relative;
    float:left;
}
.middle{
    width:100%;
    background:yellow;
}
.left{
    width:200px;
    background:pink;
    margin-left:-100%;
    right:200px;
}
.right{
    width:300px;
    background:aqua;
}

3.移动右边

同上一步的原理一样,把右侧区域也给弄上去,设置负外边距和本身宽度相同就行了。

.header,.footer{
    height:40px;
    width:100%;
    background:red;
}
.footer{
    clear:both;
}
.container{
    padding-left:200px;
    padding-right:300px;
}
.container div{
    postion:relative;
    float:left;
}
.middle{
    width:100%;
    background:yellow;
}
.left{
    width:200px;
    background:pink;
    margin-left:-100%;
    right:200px;
}
.right{
    width:300px;
    background:aqua;
    margin-right:-300px;
}

flexbox弹性盒子实现:

很简单,在写html的时候,因为不再涉及到浮动,只需要按照左中右的顺序来写就可以了。左右两块区域的宽度写死,把中间的区域的flex属性设置成1就可以了。

.header,.footer{
    height:40px;
    width:100%;
    background:red;
}
.container{
    display: flex;
}
.middle{
    flex: 1;
    background:yellow;
}
.left{
    width:200px;
    background:pink;
}
.right{
    background: aqua;
    width:300px;
}


css grid网格

grid是一种新的布局方式,截止2018年初,绝大多数浏览器都已经支持css grid。
其原理就是把页面的区域划分成一个一个的网格,就和围棋的棋盘一样。

用网格来解决圣杯问题,可以摆脱弹性盒子时需要格外加一个[container]的问题,也就是左中右三款区域不需要在他们外边包装一个额外的div。

body{
    display: grid;
}
#header{
    background: red;
    grid-row:1;
    grid-column:1/5;
}
    
#left{
    grid-row:2;
    grid-column:1/2;
    background: orange;
}
#right{
    grid-row:2;
    grid-column:4/5;
    background: cadetblue;
}
#middle{
    grid-row:2;
    grid-column:2/4;
    background: rebeccapurple
}
#footer{
    background: gold;
    grid-row:3;
    grid-column:1/5;
}

grid-row就是说由上到下,#header占据第1格,#left,#middle,#right占据第2格,#footer占据第3格。

而grid-column表示,在横向从左向右,分成了五格。其中#header和#footer占据全部。#left占据第1格,#middle占据第2到第4格,#right占据第5格。

 

三种方式实现圣杯布局

标签:自动   左移   常见   cad   接下来   包装   三种方式   底部   自动填充   

原文地址:https://www.cnblogs.com/jayfeng/p/12108567.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!