CSS固定底部写法

写在前面

如果本文对您有所帮助,就请点个关注吧!

一、问题描述

本文主要介绍一个Footer元素如何粘住底部,使其无论内容多或者少,Footer元素始终紧靠在浏览器的底部。我们知道,当内容足够多可以撑开底部到达浏览器的底部,如果内容不够多,不足以撑开元素到达浏览器的底部时,下面要讲的布局就是解决如何使元素粘住浏览器底部。需求看下图:


sticky-footer.png

二、解决方案

1. Flex1

解决思路

首先将html和body元素的高度设置为100%,然后在body添加一个div作为容器,并将其高度设置为100%,设置display:flex;flex-direction: column;,利用justify-content: space-between;在内部设置两个div,上面与下面,即可实现底部固定,注意要设置底部元素的flex属性为不可放缩,否则会被压缩。

源代码
<!DOCTYPE html>
<html>
<head>
  <title>固定底部</title>
  <style type="text/css">
    html, body {
      margin: 0;
      height: 100%;
    }
    .window {
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }
    footer {
      background-color: red;
      flex: 0 0 300px;
    }
  </style>
</head>
<body>
  <div class="window">
    <div class="main">
      <!-- 可自行添加文本进行测试 -->
      <p>测试文本</p>
      <p>测试文本</p>
      <p>测试文本</p>
      <p>测试文本</p>
      <p>测试文本</p>
      <p>测试文本</p>
      <p>测试文本</p>
      <p>测试文本</p>
      <p>测试文本</p>
      <p>测试文本</p>
      <p>测试文本</p>
      <p>测试文本</p>
      <p>测试文本</p>
    </div>
    <footer></footer>
  </div>
</body>
</html>

2.Flex2

解决思路

同样设置父元素display: flex;flex-direction: column;,然后将上面的元素的设置为flex: 1;,使其高度不足时自动补全,同样要设置底部元素不可放缩,否则会被压缩。

源代码

<!DOCTYPE html>
<html>
<head>
  <title>固定底部</title>
  <style type="text/css">
    html, body {
      margin: 0;
      height: 100%;
    }
    .window {
      height: 100%;
      display: flex;
      flex-direction: column;
    }
    .main {
      flex: 1;
    }
    footer {
      flex: 0 0 300px;
      background-color: red;
    }
  </style>
</head>
<body>
  <div class="window">
    <div class="main">
      <!-- 可自行添加文本进行测试 -->
      <p>测试文本</p>
      <p>测试文本</p>
      <p>测试文本</p>
      <p>测试文本</p>
      <p>测试文本</p>
      <p>测试文本</p>
      <p>测试文本</p>
      <p>测试文本</p>
      <p>测试文本</p>
      <p>测试文本</p>
      <p>测试文本</p>
      <p>测试文本</p>
    </div>
    <footer></footer>
  </div>
</body>
</html>

3.margin与padding

解决思路

底部元素增加负值上边距

源代码

<!DOCTYPE html>
<html>
<head>
  <title>固定底部</title>
  <style type="text/css">
    html, body {
      margin: 0;
      height: 100%;
    }
    .window {
      min-height: 100%;
    }
    .main {
      padding-bottom: 300px; 
    }
    footer {
      margin-top: -300px;
      height: 300px;
      background-color: red;
    }
  </style>
</head>
<body>
  <div class="window">
    <div class="main">
      <!-- 可自行添加文本进行测试 -->
      <p>测试内容</p>
      <p>测试内容</p>
      <p>测试内容</p>
      <p>测试内容</p>
      <p>测试内容</p>
    </div>
  </div>
  <footer></footer>
</body>
</html>

4. calc()(推荐,使用的dom最少)

解决思路

使用calc()计算内容的高度

源代码

<!DOCTYPE html>
<html>
<head>
  <title>固定底部</title>
  <style type="text/css">
    html, body {
      height: 100%;
      margin: 0;
    }
    .main {
      min-height: calc(100% - 300px);
    }
    footer {
      height: 300px;
      background-color: red;
    }
  </style>
</head>
<body>
  <div class="main">
    <!-- 可自行添加文本进行测试 -->
    <p>测试内容</p>
    <p>测试内容</p>
    <p>测试内容</p>
    <p>测试内容</p>
    <p>测试内容</p>
  </div>
  <footer></footer>
</body>
</html>

推荐阅读更多精彩内容

  • H5移动端知识点总结 阅读目录 移动开发基本知识点 calc基本用法 box-sizing的理解及使用 理解dis...
    Mx勇阅读 2,816评论 0 26
  • 移动开发基本知识点 一.使用rem作为单位 html { font-size: 100px; } @media(m...
    横冲直撞666阅读 2,403评论 0 6
  • 本文主要介绍一个Footer元素如何粘住底部,使其无论内容多或者少,Footer元素始终紧靠在浏览器的底部。我们知...
    强哥科技兴阅读 301评论 0 0
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    love2013阅读 1,069评论 0 11
  • 本书使命:教人体味生活,学会吃饭,成为内在美食家。 1、活了大半辈子,居然不会吃饭,求快的社会,让人失去了本我!就...
    cd5f9bfd47dd阅读 178评论 0 0