CSS底部固定的实现方法

2021-06-28 11:01发布

站内文章 / Web前端
1388 0 0

移动端开发中，经常会见到页面底部始终在整个屏幕最底部显示的效果，如下图所示：无论屏幕如何向下滚动图示中蓝色框住的部分都在页面中处于最底部的位置。

如果这个部分不做特殊固定处理，正常情况下，当内容足够多时，必须滑到浏览器底部才能看到底部这个模块，如果内容不够多，不足以撑开元素到达浏览器的底部时，底部可能不是显示在浏览器的最下方哦。

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>底部固定</title>
   <style>
       * {
           padding: 0;
           margin: 0;
       }
       .wrapper header {
           height: 80px;
           background-color: aqua;
       }
       .wrapper nav {
           height: 30px;
           background-color: yellow;
       }
       .wrapper .main {
           min-height: 1000px;
           background-color: cadetblue;
       }
       .wrapper footer {
           height: 50px;
           background-color: red;
       }
   </style>
</head>
<body>
   <div class="wrapper">
       <header>头部</header>
       <nav>导航</nav>
       <div class="main">主要内容</div>
       <footer>底部区域</footer>
   </div>
</body>
</html>


显示效果如下图，如果不将页面拉到最下方，无法看到红色底部区域内容。

所以，今天要实现的布局就是解决如何使元素粘住浏览器底部，常见的做法可以有以下几种。

方法一：底部固定高度，配合固定定位实现

实现思路：给底部区域设置固定定位，将其位置固定到整个浏览器窗口的底部，同时由于设置固定定位后footer的宽度将自适应内容的宽度，如果需要它占满屏幕的宽需要将其宽度设置为100%。此时，footer区域会遮盖主要内容的部分内容，因此，还需要给main区域设置一个间距至少为footer的高度，保证主要内容区域显示完整。

.wrapper .main {
   min-height: 1000px;
   background-color: cadetblue;
   margin-bottom: 50px;
}
.wrapper footer {
   position: fixed;
   left: 0;
   bottom: 0;
   width: 100%;
   height: 50px;
   background-color: red;
}

方法二：使用calc()计算内容的高度

实现思路：首先将底部放在wrapper外部，给wrapper设置最小高度，利用calc动态进行最小高度计算，这里用到了vh这个单位，vh是将屏幕整个的高度划分为100份，使用100vh减去50px是为了底部不会遮挡主要主要内容区域。

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>底部固定</title>
   <style>
       * {
           padding: 0;
           margin: 0;
       }
       .wrapper {
           min-height: calc(100vh - 50px);
       }
       .wrapper header {
           height: 80px;
           background-color: aqua;
       }
       .wrapper nav {
           height: 30px;
           background-color: yellow;
       }
       .wrapper .main {
           background-color: cadetblue;
       }
       footer {
           height: 50px;
           background-color: red;
       }
   </style>
</head>
<body>
   <div class="wrapper">
       <header>头部</header>
       <nav>导航</nav>
       <div class="main">主要内容</div>
   </div>
   <footer>底部区域</footer>
</body>
</html>

方法三：使用flexbox

实现思路：设置html的高度为100%，body的最小高度为100%，并将body设置为弹性盒子，主轴方向为垂直方向，并给wrapper设置flex:1即可实现。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>底部固定</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        html {
            height: 100%;
        }
        body {
            min-height: 100%;
            display: flex;
            flex-direction: column;
        }
        .wrapper {
            flex: 1;
        }
        .wrapper header {
            height: 80px;
            background-color: aqua;
        }
        .wrapper nav {
            height: 30px;
            background-color: yellow;
        }
        .wrapper .main {
            background-color: cadetblue;
        }
        footer {
            height: 50px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div>
        <header>头部</header>
        <nav>导航</nav>
        <div>主要内容</div>
    </div>
    <footer>底部区域</footer>
</body>
</html>

方法四：使用grid布局

实现思路：设置html的高度为100%，body的最小高度为100%，并将body设置为网格布局，设置行高grid-template-rows: 1fr auto;,给footer设置grid-row-start: 2; grid-row-end: 3;即可实现。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>底部固定</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        html {
            height: 100%;
        }
        body {
            min-height: 100%;
            display: grid;
            grid-template-rows: 1fr auto;
        }
        .wrapper header {
            height: 80px;
            background-color: aqua;
        }
        .wrapper nav {
            height: 30px;
            background-color: yellow;
        }
        .wrapper .main {
            background-color: cadetblue;
        }
        footer {
            grid-row-start: 2;  
            grid-row-end: 3;
            height: 50px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div>
        <header>头部</header>
        <nav>导航</nav>
        <div>主要内容</div>
    </div>
    <footer>底部区域</footer>
</body>
</html>

以上就是底部固定可以实现的方法，动手试一试吧！