html 圣杯布局 高度,三种实现圣杯布局方法

本文介绍三种实现圣杯布局的方法,前两种可归为一类，与第三种方法差别在于加载顺序不同。

圣杯布局实现1：

步骤1：给出 HTML结构：

圣杯布局1

* {

margin: 0;

padding: 0;

text-Align: center;

}

#top {

background: #666;

height: 60px;

}

#left {

background: #E79F6D;

}

#content {

background: #D6D6D6;

}

#right {

background: #77BBDD;

}

#foot {

background: #666;

height: 50px;

}

这是Top!

这是Left!

这是Content!
这是多行高度！

这是Right!

这是Foot!

效果如下：

Paste_Image.png

步骤2：

设置中间三个div向左浮动，使其排列在一行： #left, #content,#right{ float:left;}。

设置Foot元素清除浮动，阻止与上面的main部分重叠：#foot { background: #666; height: 50px; clear: both;}。

设置中间三个div的宽度，左右定宽，中间宽度自适应：

#left {

background: #E79F6D;

width: 150px;

}

#content {

background: #D6D6D6;

width: 100%;

}

#right {

background: #77BBDD;

width: 200px;

}

效果如下：

Paste_Image.png

步骤3：

现在Content宽度为100%，占满整个浏览器宽度，若想要中间Content给两边Left和Right挪出空间，则需要设置容器main左右padding值。

由于容器main内元素均设置左浮动，都不在文档流中，导致main高度塌陷，设置overflow:hidden可解决该问题。

#main{

padding-left: 150px;

padding-right: 200px;

background-color: bisque;

}

效果如下：

Paste_Image.png

步骤4：

由于设置padding后，中间三个div宽度之和超过浏览器宽度，所以各独占一行，要使Left元素和Right元素分别移动到Content的左右两边，则需要给Left设置负的margin-left,给Right设置负的margin-right。

#left {

background: #E79F6D;

width: 150px;

margin-left: -150px;;

}

#right {

background: #77BBDD;

width: 200px;

margin-right: -200px

}

效果如下：

Paste_Image.png

步骤5：

使中间三个div高度自适应，即高度相等且等于高度最大的div，使用内外下边距相抵消的方法：

#left, #content, #right { float:left; padding-bottom: 2000px; margin-bottom: -2000px; }

最终效果如下：

Paste_Image.png

最终代码：

圣杯布局1

* {

margin: 0;

padding: 0;

text-Align: center;

}

#top {

background: #666;

height: 60px;

}

#left, #content,#right{

float:left;

margin-bottom: -2000px;

padding-bottom: 2000px;

}

#main{

padding-left: 150px;

padding-right: 200px;

background-color: bisque;

overflow: hidden;

}

#left {

background: #E79F6D;

width: 150px;

margin-left: -150px;;

}

#content {

background: #D6D6D6;

width: 100%;

}

#right {

background: #77BBDD;

width: 200px;

margin-right: -200px;

}

#foot {

background: #666;

height: 50px;

clear: both;

}

这是Top!

这是Left!

这是Content!
这是多行高度！

这是Right!

这是Foot!

圣杯布局实现2：

与方法1的前三步相同，在第四步时采用了不同的解决方案：

步骤4-1

通过为Content和Right设置一个负的margin-left属性：

#content {

background: #D6D6D6;

width: 100%;

margin-left: -150px;

}

#right {

background: #77BBDD;

width: 200px;

margin-left: -200px;

}

效果如下：(此时Left被覆盖)

Paste_Image.png

步骤4-2

设置Left和Right的positon分别调整其位置使左移和右移：

#left {

background: #E79F6D;

width: 150px;

position: relative;

left: -150px;

}

#right {

background: #77BBDD;

width: 200px;

margin-left: -200px;

position: relative;

left: 200px;

}

效果如下：

Paste_Image.png

步骤四完成，步骤五同方法1。

最终代码：

圣杯布局1

* {

margin: 0;

padding: 0;

text-Align: center;

}

#top {

background: #666;

height: 60px;

}

#left, #content,#right{

float:left;

padding-bottom: 2000px;

margin-bottom: -2000px;

}

#main{

padding-left: 150px;

padding-right: 200px;

background-color: bisque;

overflow: hidden;

}

#left {

background: #E79F6D;

width: 150px;

position: relative;

left: -150px;

}

#content {

background: #D6D6D6;

width: 100%;

margin-left: -150px;

}

#right {

background: #77BBDD;

width: 200px;

margin-left: -200px;

position: relative;

left: 200px;

}

#foot {

background: #666;

height: 50px;

clear: both;

}

这是Top!

这是Left!

这是Content!
这是多行高度！

这是Right!

这是Foot!

圣杯布局实现3(先加载主列)：

效果如下：

4770448-f4aeb930e2732d89.png

最终代码：

polandeme

body{

color: aliceblue;

}

.main-wrap{

margin-left: 190px;

margin-right: 190px;

}

/*.grid-s5m0e5 { width:100%;}*/

.col-main {

float:left;

width: 100%;

min-height:30px;

background:#000;

}

.col-sub {

float:left;

margin-left: -100%;

width:190px;

min-height:30px;

background:#f00;

}

.col-extra {

margin-left: -190px;

float:left;

width:190px;

min-height:30px;

background:#00f;

}

我是主列，出来吧！

我是子列

我是附加列