圣杯布局(浮动实现)

最新推荐文章于 2024-07-17 16:42:38 发布

makelucky

最新推荐文章于 2024-07-17 16:42:38 发布

阅读量405

点赞数

分类专栏： H5

本文链接：https://blog.csdn.net/makelucky/article/details/102716674

版权

H5 专栏收录该内容

28 篇文章 0 订阅

订阅专栏

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

1、上部和下部各自占领屏幕所有宽度。

2、上下部之间的部分是一个三栏布局。

3、三栏布局两侧宽度不变，中间部分自动填充整个区域。

4、中间部分的高度是三栏中最高的区域的高度。

浮动实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>圣杯布局</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        body{
            min-width: 550px;
        }
        .header{
            width:100%;
            height:100px;
            background: #ccc;
        }
        .container{
            
            padding-left:200px;
            padding-right:150px;
        }
        .column{
            min-height: 400px;
            float:left;
        }
        .left{
            width:200px;
            background: yellow;
            margin-left:-100%;
            position:relative;
            right:200px;
        }
        .center{
            width:100%;
            background:saddlebrown;
        }
        .right{
            width:150px;
            background: seagreen;
            margin-right:-150px;
        }
        .footer{
            width:100%;
            height:100px;
            clear:both;
            background:  #ccc;
        }
    </style>
</head>
<body>
    <div class="header"></div>
    <div class="container">
        <div class="center column">1</div>
        <div class="left column">2</div>
        <div class="right column">3</div>
    </div>
    <div class="footer"></div>
</body>
</html>

(1)填充三栏

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

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

(2)移动左侧区域

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

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

(3)移动右边

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