6、CSS实现圣杯布局

最新推荐文章于 2024-07-04 23:28:25 发布

C.&H.

最新推荐文章于 2024-07-04 23:28:25 发布

阅读量872

点赞数

分类专栏： CSS

本文链接：https://blog.csdn.net/sunnnnh/article/details/116546333

版权

CSS 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

本文详细介绍了如何使用Flex布局、Grid布局和Float布局来实现圣杯布局，即一个具有固定宽度侧边栏和自适应中间内容的页面布局。每种方法都提供了HTML和CSS代码示例，并解释了关键样式属性的作用，如`display: flex`、`grid-template-columns`和浮动定位。此外，还提到了响应式设计中最小宽度`min-width`的应用以及fr、vh单位的使用。

摘要由CSDN通过智能技术生成

圣杯布局的主要结构如下图所示：

头部header，中间（又分为三列：左left，中center，右right；要求左右宽度固定，中间自适应），底部footer。

为了防止页面缩放的太小，影响浏览，一般会为页面设置最小宽度min-width。

（1）方式一：flex布局

header和footer设置样式，横向撑满。
container中的left、center、right依次排布即可
给container设置弹性布局 display: flex;
left和right区域定宽，center设置 flex: 1; 即可（flex:1其实代表的是flex-grow:1，另外两个取默认值即可； flex:1 实际代表的就是 flex:1 0 auto）

HTML:

CSS：

（2）方式二：grid布局

HTML:

CSS:

代码：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>Examples</title>
    <meta name="description" content="">
    <meta name="keywords" content="">
    <style type="text/css">
        body{
            min-width: 600px;
            font-size: 20px;
            font-weight: bold;
        }
        .box{/*整个盒子分为上中下三个区域，中间自适应*/
            display: grid;
            grid-template-columns: 200px auto 200px; /*3行3列，第1~3列对应宽度*/
            grid-template-areas:
                "a a a"
                "b c d"
                "e e e";
            text-align: center; 
        }
        .header{
            grid-area: a;
            background: grey;
            height: 60px;
            line-height: 60px;
        }
        .left, .center, .right{
            height: 300px;
            line-height: 300px;
        }
        .footer{
            grid-area: e;
            background: black;
            height: 60px;
            line-height: 60px;
        }
        
        /*中间部分, 再将中间部分分为左中右，中间自适应*/
        .left{
            grid-area: b;
            background: pink;
        }
        .center{/*中间的center部分：自适应*/
            grid-area: c;
            background: lightseagreen;
        }
        .right{
            grid-area: d;
            background: pink;
        }
    </style>

</head>

<body>
    <div class="box">
        <div class="header">header</div> 

        <div class="left">left</div>
        <div class="center">center</div>
        <div class="right">right</div>

        <div class="footer">footer</div>
    </div>
</body>
</html>

1. fr是一个相对尺寸单位，表示剩余空间做等分，此项分配到的百分比(如果只有一个项使用此单位，那就占剩余空间的100%)

弹性尺寸使用fr尺寸单位，其来自 “fraction” 或 “fractional unit” 单词的前两个字母，表示整体空间的一部分。

2. vh就是当前屏幕可见高度的1%，也就是说

height:100vh == height:100%;

效果：
当元素没有内容时候，设置height:100%，该元素不会被撑开，此时高度为0，
但是设置height:100vh，该元素会被撑开屏幕高度一致。

（3）方式三：float布局

先定义好header和footer的样式，使之横向撑满。
在container中的三列设为浮动和相对定位(后面会用到)，center要放在最前面，footer清除浮动。
三列的左右两列分别定宽200px和150px，中间部分center设置100%撑满
这样因为浮动的关系，center会占据整个container，左右两块区域被挤下去了
接下来设置left的 margin-left: -100%;，让left回到上一行最左侧
但这会把center给遮住了，所以这时给外层的container设置 padding-left: 200px;padding-right: 150px;，给left和right空出位置
这时left并没有在最左侧，因为之前已经设置过相对定位，所以通过 left: -200px; 把left拉回最左侧
同样的，对于right区域，设置 margin-left: -150px; 把right拉回第一行
这时右侧空出了150px的空间，所以最后设置 right: -150px;把right区域拉到最右侧就行了。

HTML:

CSS:

代码：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>Examples</title>
    <meta name="description" content="">
    <meta name="keywords" content="">
    <style type="text/css">
        body{
            min-width: 600px;
            font-size: 20px;
            font-weight: bold;
        }
        .header, .footer{
            height: 60px;
            line-height: 60px;
            text-align: center;
            background: grey;
        }
        .footer{
            clear: both;
        }
        .container{
            padding-left: 200px;
            padding-right: 200px;
            overflow: hidden;
        }
        .container div{
            position: relative;
            float: left;
            height: 300px;
            line-height: 300px;
            text-align: center;
        }
        .center{
            width: 100%; 
            background: lightseagreen;
        }
        .left{
            width: 200px;
            background: lightslategrey;
            right: 200px;
            margin-right: -200px;
        }
        .right{
            width: 200px;
            background: pink;
            right: -200px;
            margin-left: -200px;
        }
    </style>

</head>

<body>
    <div class="header">header</div> 
        <div class="container">
            <div class="left">left</div>
            <div class="center">center</div>
            <div class="right">right</div>
        </div>
    <div class="footer">footer</div>
</body>
</html>

C.&H.

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
6、CSS实现圣杯布局

圣杯布局的主要结构如下图所示：头部header，中间（又分为三列：左left，中center，右right；要求左右宽度固定，中间自适应），底部footer。为了防止页面缩放的太小，影响浏览，一般会为页面设置最小宽度min-width。（1）方式一：flex布局header和footer设置样式，横向撑满。 container中的left、center、right依次排布即可给container设置弹性布局display: flex; left和right区域定宽，center.
复制链接

扫一扫

专栏目录