网站footer沉底结果的三种解决方案

2019年9月1日 190次阅读 来源: 羊羊羊

题目背景

许多网站设想平常是两个部份，content + footer，content内里装的是网站主体内容，footer内里展现网站的注册信息等等，由于网站内容高度不定的缘由，会出现下面两种状况：
1.内容较少时，这个footer牢固在在页面的底部。以下所示：
《网站footer沉底结果的三种解决方案》
2.内容较长时，footer跟在内容背面滑动，大抵表现以下图赤色框起来的部份（对应网址：http://www.sbc-mcc.com/）：
《网站footer沉底结果的三种解决方案》

这个需求在PC端照样很罕见的，我在本身的运用中也碰到了这个题目，本日总结了一下完成这类规划的几个要领。

要领1 运用js盘算

为何第一个就采纳js掌握的呢，由于实不相瞒，当初我第一次碰到这个题目的时刻，直接就运用js去处理的（主假如我晓得js肯定能完成的，所以也就没有花时间去想别的要领）
重要思绪是：在页面加载完成后盘算屏幕高度 – content内容实在的高度的值，假如差值大于
footer的高度，就给footer的style加上fixed定位，使它牢固在屏幕底部。
demo代码以下：

<!DOCTYPE html>
<html>
<head>
    <title>footer沉底结果</title>
    <style type="text/css">
        div {
            margin: 0,
            padding: 0;
            box-sizing: border-box;
            position: relative;
        }
        html, body {
            width: 100%;
            height: 100%;
        }
        #container {
            width: 100%;
            height: 100%;
        }
        #content {
            background: blue;
        }
        #footer {
            width: 100%;
            height: 100px;
            background: red;
        }
        .footer-fixed {
            position: fixed;
            left: 0;
            bottom: 0;
        }
    </style>
</head>
<body>

<div id="container">
    <div id="content"> content </div>

    <div id="footer">
        footer
    </div>
</div>

<script type="text/javascript">
    let height = document.getElementById('container').clientHeight - document.getElementById('content').clientHeight;
    // 这里给footer加上别的的class,使其牢固
    if (height > 100) document.getElementById('footer').classList.add('footer-fixed');
</script>

</body>
</html>

本着能运用css处理就绝对不运用js的准绳，这个要领虽然最轻易想到，然则照样不引荐运用，而且，这段css代码要猎取clientHeight，将会致使页面页面重排和重绘，机能斟酌上来讲，也不引荐。

要领2 采纳flex规划 + min-height

flex规划中的justify-content: space-between;搭配超等好用的min-height，恰好能够满足在content内容不足的时刻，footer的沉底结果
demo代码以下：

<!DOCTYPE html>
<html>
<head>
    <title>footer沉底结果</title>
    <style type="text/css">
        div {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            position: relative;
        }
        html, body {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }
        #container {
            width: 100%;
            // 重点代码
            // 虽然不晓得container的高度，然则能够设置一个最小高度，如许有利于规划
            min-height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }
        #content {
            background: blue;
        }
        #footer {
            width: 100%;
            height: 100px;
            background: red;
        }
    </style>
</head>
<body>

<div id="container">
    <div id="content"> 
        content  <br>
        content  <br>
        content  <br>
        content  <br>
        content  <br>
        content  <br>
        content  <br>
        content  <br>
        content  <br>
        content  <br>
        content  <br>
        content  <br>
        content  <br>
        content  <br>
        content  <br>
        content  <br>
        content  <br>
    </div>

    <div id="footer">
        footer
    </div>
</div>

</body>
</html>

min-height实在是超等好用的一个css属性了，搭配flex轻松完成沉底结果。

要领3 巧用flex + margin-top

这个技能是在讲margin auto的妙用中学到的，在flex格式化高低文中，margin auto会自动去分派盈余空间。这内里我们能够在footer上运用margin-top:auto来到达沉底结果。

<!DOCTYPE html>
<html>
<head>
    <title>footer沉底结果</title>
    <style type="text/css">
        div {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            position: relative;
        }
        html, body {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }
        #container {
            width: 100%;
            min-height: 100%;
            display: flex;
            flex-direction: column;
        }
        #content {
            background: blue;
        }
        #footer {
            width: 100%;
            height: 100px;
            background: red;
            margin-top: auto; // 重点代码
        }
    </style>
</head>
<body>

<div id="container">
    <div id="content"> 
        content  <br>
        content  <br>
        content  <br>
        content  <br>
        content  <br>
        content  <br>
        content  <br>
        content  <br>
        content  <br>
        content  <br>
        content  <br>
        content  <br>
        content  <br>
        content  <br>
        content  <br>
        content  <br>
        content  <br>
        content  <br>
        content  <br>
        content  <br>
        content  <br>
        content  <br>
        content  <br>
        content  <br>
        content  <br>
        content  <br>
        content  <br>
        content  <br>
        content  <br>
        content  <br>
        content  <br>
        content  <br>
        content  <br>
        content  <br>
    </div>

    <div id="footer">
        footer
    </div>
</div>

</body>
</html>

总结：以上三种要领都属于没什么副作用的，实在完成这类沉底结果另有别的完成体式格局，然则对其他规划有影响，这里不赘述，以后有了更好的处理方案，再来更新。
PS：之前margin auto没有深切相识过，相识以后发明照样很奇异的，引荐右侧文章探秘 flex 高低文中奇异的自动 margin

    原文作者：羊羊羊
    原文地址: https://segmentfault.com/a/1190000019306189
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞