JQuery / Bootstrap / ES / JS - Bootstrap 实现可视窗口高度自适应的网页底部信息条 Sticky Bottom Bar - 《Web Development 小白学习笔记》

无需自定义CSS，使用 Bootstrap 即可实现可视窗口高度自适应、Sticky Bottom 效果的网页底部信息条。
不多说，例子上来，将以下HTML代码复制 / 粘贴到新建的空白 test.html 文件中，保存后直接用浏览器打开即可看到效果。

<!DOCTYPE html>
<html class="h-100">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Sticky Bottom Test</title>
        <meta name="description" content="Sticky Bottom Test">
        <link rel="shortcut icon" href='favicon.ico' type="image/x-icon">
        <!-- Front End Framework: JQuery / Bootstrap -->
        <link href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
    </head>
    <body class="d-flex flex-column h-100">
        <main role="main" class="flex-shrink-0">
            <div class="container mt-5">
                Write your body content here...
                <p>
                    Hello, Github, Baidu, Google, and you, and you......
                </p>
            </div>
        </main>
                <footer class="bg-dark mt-auto py-3">
            <div class="container text-center text-secondary">
                Sticky bottom bar. Copyrights logo and information.
            </div>
                </footer>
<!-- Scripts begin -->
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/popper.js/1.15.0/esm/popper.min.js"></script>
<script src="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script>
$(window).ready(function() {
    // Customize scripts here...
});
</script>
<!-- Scripts end   -->
    </body>
</html>

以下把最主要的样式框架代码单独列出，即可大致看出 Bootstrap Sticky Bottom 样式的应用模式：

<html class="h-100">
      ...
      <body class="d-flex flex-column h-100">
           <main role="main" class="flex-shrink-0">
             ...
        </main>
                <footer class="bg-dark mt-auto py-3">
                ...
          </footer>
          ...
      </body>
</html>