css实现圣杯布局的四种方式

最新推荐文章于 2024-06-17 00:08:19 发布

小白之旅

最新推荐文章于 2024-06-17 00:08:19 发布

阅读量1.9k

点赞数

分类专栏： css 文章标签： css css3 前端

本文链接：https://blog.csdn.net/qq_33721778/article/details/126872785

版权

css 专栏收录该内容

9 篇文章 2 订阅

订阅专栏

本文详细介绍了四种实现圣杯布局的方法：利用float、position定位、flex布局和grid布局。每种方法都提供了相应的HTML和CSS代码示例，展示了如何创建两端固定、中间自适应的页面结构。在现代网页开发中，这些布局技巧对于创建复杂且响应式的用户界面至关重要。

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

圣杯布局如下图指的是两端宽度固定，中间自适应。在日常开发中，圣杯布局的使用频率是比较高的。

本篇文章整理了几种圣杯布局的实现方式，欢迎各位大佬进行补充。

在线试一试
在这里插入图片描述
HTML代码

<body class="holy-grail">
    <header>header</header>
    <div class="holy-grail-body">
      <nav class="holy-grail-nav">left</nav>
      <main class="holy-grail-content">content</main>
      <aside class="holy-grail-ads">right</aside>
    </div>
    <footer>footer</footer>
  </body>

利用float

这种方法实现起来比较麻烦，需要设置float: left;，配合负margin来实现。

实现

.holy-grail {
  min-height: 100vh;
  padding: 0;
  margin: 0;
  text-align: center;
  color: #fff;
}

.common {
  float: left;
  height: calc(100vh - 120px);
}

header,
footer {
  height: 60px;
  line-height: 60px;
  background-color: #7dbcea;
}

footer {
  clear: both;
}

.holy-grail-body {
  padding: 0 200px;
}

.holy-grail-content {
  width: 100%;
  background-color: rgba(16, 142, 233, 1);
  display: flex;
  align-items: center;
  justify-content: center;
}

.holy-grail-nav,
.holy-grail-ads {
  background-color: #3ba0e9;
  width: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.holy-grail-nav {
  margin-left: -200px;
}

.holy-grail-ads {
  margin-right: -200px;
}

利用position定位

利用position定位实现比利用float能简单一些，设置position: absolute;，利用left、right、bottom、top来自适应

实现

.holy-grail {
  position: relative;
  padding: 0;
  margin: 0;
  min-height: 100vh;
  text-align: center;
  color: #fff;
}

header,
footer {
  width: 100%;
  height: 60px;
  line-height: 60px;
  background-color: #7dbcea;
}

footer {
  position: absolute;
  bottom: 0;
}

.holy-grail-body {
  position: absolute;
  left: 0;
  right: 0;
  top: 60px;
  bottom: 60px;
}

.holy-grail-content {
  position: absolute;
  left: 180px;
  right: 180px;
  top: 0px;
  bottom: 0px;
  background-color: rgba(16, 142, 233, 1);
  display: flex;
  align-items: center;
  justify-content: center;
}

.holy-grail-nav,
.holy-grail-ads {
  width: 180px;
  height: 100%;
  background-color: #3ba0e9;
  display: flex;
  align-items: center;
  justify-content: center;
}

.holy-grail-ads {
  position: absolute;
  right: 0;
  top: 0;
}

利用flex布局

利用flex实现相对会比较简单。
设置父组件display: flex;。
横向布局时，设置左右宽度，content设置flex: 1;，使其自适应。
纵向布局时，设置上下高度，中间设置flex: 1;，使其自适应。

实现

CSS代码

.holy-grail {
  padding: 0;
  margin: 0;
  display: flex;
  min-height: 100vh;
  flex-direction: column;
  text-align: center;
  color: #fff;
}

header,
footer {
  flex: 0 0 60px;
  line-height: 60px;
  background-color: #7dbcea;
}

.holy-grail-body {
  display: flex;
  flex: 1;
}

.holy-grail-content {
  flex: 1;
  background-color: rgba(16, 142, 233, 1);
  display: flex;
  align-items: center;
  justify-content: center;
}

.holy-grail-nav,
.holy-grail-ads {
  flex: 0 0 180px;
  background-color: #3ba0e9;
  display: flex;
  align-items: center;
  justify-content: center;
}

利用grid布局

利用flex实现是最简单的。
设置组件display: flex;。
横向布局时，设置grid-template-columns: 180px 1fr 180px;，设置1fr使其自适应。
纵向布局时，设置grid-template-rows: 60px 1fr 60px;即可。

实现

.holy-grail {
  padding: 0;
  margin: 0;
  min-height: 100vh;
  display: grid;
  grid-template-rows: 60px 1fr 60px;
  text-align: center;
  color: #fff;
}

header,
footer {
  line-height: 60px;
  background-color: #7dbcea;
}

.holy-grail-body {
  display: grid;
  grid-template-columns: 180px 1fr 180px;
}

.holy-grail-content {
  background-color: rgba(16, 142, 233, 1);
  display: flex;
  align-items: center;
  justify-content: center;
}

.holy-grail-nav,
.holy-grail-ads {
  background-color: #3ba0e9;
  display: flex;
  align-items: center;
  justify-content: center;
}