使用css弹性布局，让页面footer底部固定

电玩女神 2022-12-22 04:37 53阅读 0赞

在前端开发过的工作中，footer永远固定在底部的需求。也就是说一个Footer元素如何粘住底部，使其无论内容多或者少，Footer元素始终紧靠在浏览器的底部。我们知道，当内容足够多可以撑开底部到达浏览器的底部，如果内容不够多，不足以撑开元素到达浏览器的底部时，下面要讲的是使用css弹性布局解决如何使元素粘住浏览器底部。需求看下图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzM2NzI4NTE4_size_16_color_FFFFFF_t_70][]

首先这是HTML部分结构：

然后看css部分：

.layout {
      display: flex;
      min-height: 100vh;
      flex-direction: column;
    }
    .header {
      height: 2rem;
    }
    .mian {
      width: 100%;
      flex: auto;
      background-color: yellow;
    }
    .footer {
      height: 2rem;
      background-color: red;
    }

最终的结果：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzM2NzI4NTE4_size_16_color_FFFFFF_t_70 1][]

这里面主要使用的是display:flex弹性布局，让父元素的最小高度为100vh，vh的是视口的单位，1vh等于视口高度的1%，100vh就等同于视口的高度。flex-direction: column;可以蒋子元素垂直显示，正如一个列一样。

然后在子元素内容部分main添加flex:auto;

flex: auto 等同于 flex: 1 1 auto，它根据元素的 width 或 height 属性调整元素的大小，但是其非常灵活，以便让它们吸收沿主轴的任何额外空间。

以上就是footer粘在页面底部的方法。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzM2NzI4NTE4_size_16_color_FFFFFF_t_70]: /images/20221120/a537f5030aae404381c3c4a4cdc1370e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzM2NzI4NTE4_size_16_color_FFFFFF_t_70 1]: /images/20221120/49e54f576d7141068eb21175fb82e78a.png