圣杯布局

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

扎扎小成

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

阅读量87

点赞数

分类专栏： HTML+CSS 前端文章标签： html+css 圣杯布局

本文链接：https://blog.csdn.net/qq_41271393/article/details/98477536

版权

前端同时被 2 个专栏收录

13 篇文章 0 订阅

订阅专栏

HTML+CSS

4 篇文章 0 订阅

订阅专栏

左中右三栏布局，走边和右边宽度固定，三栏都是高度自适应。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>圣杯布局</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    body,
    html {
      height: 100%;
    }

    .left {
      width: 200px;
      height: 100%;
      background: #000;
      float: left;
    }

    .right {
      width: 200px;
      height: 100%;
      background: seagreen;
      float: right;
    }

    .center {
      height: 100%;
      background: #dddd00;
      overflow: hidden;
    }
  </style>
</head>
<body>
  <div class="left">left</div>
  <div class="right">right</div>
  <div class="center"></div>
</html>