详解CSS经典布局之Sticky footer布局

下面是“详解CSS经典布局之Sticky footer布局”的完整攻略。

简介

Sticky footer布局是一种常用的网站页面布局方式。它的特点是底部的footer元素始终粘着页面底部，不会因内容高度不足而漂浮在中间或者底部。

实现思路

实现Sticky footer布局的关键在于以下两点：

父元素高度设置为100%。
footer元素使用绝对定位，并将其bottom属性设置为0。

HTML结构

首先我们来看一下HTML结构，通常我们需要使用一个包裹所有内容的容器，并在其中添加header、content和footer三个元素，如下所示：

<body>
  <div class="wrapper">
    <header>Header</header>
    <div class="content">
      <!-- 主要内容 -->
    </div>
    <footer>Footer</footer>
  </div>
</body>

CSS样式

接下来我们需要给每个元素添加对应的CSS样式，具体的实现代码如下所示：

html, body {
  height: 100%;
}
body {
  margin: 0;
  padding: 0;
}
.wrapper {
  min-height: 100%;
  position: relative;
}
header {
  height: 50px;
  background-color: #dcdcdc;
}
.content {
  padding-bottom: 100px; /* 与footer高度相同 */
}
footer {
  height: 100px;
  background-color: #f5f5f5;
  position: absolute;
  bottom: 0;
  width: 100%;
}

这个CSS样式的主要思路就是让wrapper元素的高度铺满整个屏幕，对于header、content和footer元素分别添加对应的高度和背景色等样式属性，让它们在页面中的位置相对于wrapper元素进行定位。

在上面的CSS代码中，我们将wrapper元素的position属性设置为relative，让其内部的元素可以通过absolute或fixed定位，之后再通过给footer元素添加position: absolute 和 bottom: 0的样式，让它的位置始终保持在wrapper元素的底部，并不会随着页面内容的高度变化而改变位置。

另外也需要在.content元素中添加padding-bottom样式属性，该属性的值需要与footer元素的高度相等，这样可以为footer元素腾出足够的空间，让它可以与content元素隔开。

示例说明：

下面分别对Flexbox和Grid Layout两种布局方式进行讲解：

示例一：使用Flexbox实现Sticky footer布局

HTML结构：

<body>
  <div class="wrapper">
    <header>Header</header>
    <div class="content">
      <!-- 主要内容 -->
    </div>
    <footer>Footer</footer>
  </div>
</body>

CSS样式：

html, body {
  height: 100%;
}
body {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.wrapper {
  flex: 1;
}
header {
  height: 50px;
  background-color: #dcdcdc;
}
.content {
  flex: 1;
  padding-bottom: 100px; /* 与footer高度相同 */
}
footer {
  height: 100px;
  background-color: #f5f5f5;
}

在这个示例中，我们使用了Flexbox布局方式来实现Sticky footer布局。首先需要将body元素的display属性设置为flex，这样可以让wrapper元素使用flex布局。然后给wrapper元素的flex属性设置为1，让其在垂直方向上填满整个可视区域。让header元素和footer元素使用固定高度（50px和100px），并将content元素的flex属性设置为1，让它可以占用wrapper元素剩余的所有空间。

示例二：使用Grid Layout实现Sticky footer布局

HTML结构：

<body>
  <div class="wrapper">
    <header>Header</header>
    <div class="content">
      <!-- 主要内容 -->
    </div>
    <footer>Footer</footer>
  </div>
</body>

CSS样式：

html, body {
  height: 100%;
}
body {
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-rows: auto 1fr auto;
}
.wrapper {
  grid-row: 2;
}
header {
  height: 50px;
  background-color: #dcdcdc;
}
.content {
  padding-bottom: 100px; /* 与footer高度相同 */
}
footer {
  height: 100px;
  background-color: #f5f5f5;
}

在这个示例中，我们使用了Grid Layout布局方式来实现Sticky footer布局。我们首先将body的display属性设置为grid，并使用grid-template-rows属性将body分成三行，第一行和第三行使用auto设置高度，中间一行使用1fr占据所有剩余的空间。然后通过将wrapper元素设置为第二行，使得它可以填满整个屏幕的剩余空间。最后在content元素中添加padding-bottom样式属性，让其与footer元素隔开。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：详解CSS经典布局之Sticky footer布局 - Python技术站