CSS 如何实现圣杯布局？

艾光远

已于 2025-08-09 00:17:12 修改

阅读量856

点赞数

CC 4.0 BY-SA版权

分类专栏：前端面试文章标签：前端开发 CSS 面试

于 2021-11-13 21:46:55 首次发布

本文链接：https://blog.csdn.net/weixin_40629244/article/details/121307232

前端面试专栏收录该内容

59 篇文章 ¥19.90 ¥99.00

订阅专栏

超级会员免费看

本文详细介绍了如何使用Flex布局、Float布局（两种方式）、绝对定位和Grid布局来实现‘圣杯’布局，这是一种常见的网页布局结构。通过具体的代码实现，帮助读者理解各种方法的运用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

圣杯布局是一种典型的网页布局结构，如下所示：

实现方式有多种，下面一一给出代码实现。

1. Flex布局来实现

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    .header,
    .footer {
      height: 40px;
      width: 100%;
      background: red;
    }

    .container {
      display: flex;
    }

    .middle {
      flex: 1;
      background: yellow;
    }

    .left {
      width: 200px;
      background: pink;
    }

    .right {
      background: aqua;

了解本专栏