Question

我当前正在开发一个 Django 项目，并且我想要设置一个粘贴在页面底部的页脚（粘性页脚）。

在寻找论坛时，我找到了一种解决方案，可以“完成工作”（即将页脚粘贴在页面底部），但行为尴尬，要知道它会根据屏幕的大小掩盖某些按钮（例如，数据表的分页按钮）

这对我的功能测试（硒）也很尴尬，因为当黄油被页脚遮盖时，某些测试会失败（请参见红色框中的图像）

是否有引导程序页脚或解决此问题的方法？

/* Sticky footer styles
-------------------------------------------------- */

.asteriskField{
  display: none;
}
form .alert ul li{
  list-style: none;
}
form .alert ul {
  margin:0;
  padding: 0;
}
body > div > div.col-6 > div > div > h2 {
  font-size: 20px;
}
.footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  /* Set the fixed height of the footer here */
  height: 60px;
  line-height: 60px; /* Vertically center the text there */
  background-color: #f5f5f5;
  /*background-color: red;*/

}

Answer 1

我是django开发人员（因为您用django标记了这个问题，实际上并没有关系），所以如果这不是您想要的，请不要怪我：

html {
    position: relative;
    min-height: 100%;
    scroll-behavior: smooth;
}
body {
    margin-bottom: 56px;
}
.footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 56px;
}

Answer 2

就这样：

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css">
    <link rel="stylesheet" href="style.css">
    <style>
        .bottom {
            position: fixed;
            background-color: blue;
            width: 100%;
            bottom: 0px;
            text-align: center;
            padding-top: 30px; 
        }
    </style>
    <title>Title</title>
</head>

<body style="background-color: yellow;>
        <div class=" container-fluid" ">
                <h1>Responsive Columns</h1>
                <p>Resize the browser window to see the effect.</p>
                <p>The columns will automatically stack on top of each other when the screen is less than 576px wide.</p>
                <div class=" row">
    <div class="col-sm-3" style="background-color:lavender;">.col-sm-3</div>
    <div class="col-sm-3" style="background-color:lavenderblush;">.col-sm-3</div>
    <div class="col-sm-3" style="background-color:lavender;">.col-sm-3</div>
    <div class="col-sm-3" style="background-color:lavenderblush;">.col-sm-3</div>
    </div>
    </div>
    <div class="container-fluid">
        <h1>Responsive Columns</h1>
        <p>Resize the browser window to see the effect.</p>
        <p>The columns will automatically stack on top of each other when the screen is less than 576px wide.</p>
        <div class="row">
            <div class="col-sm-3" style="background-color:lavender;">.col-sm-3</div>
            <div class="col-sm-3" style="background-color:lavenderblush;">.col-sm-3</div>
            <div class="col-sm-3" style="background-color:lavender;">.col-sm-3</div>
            <div class="col-sm-3" style="background-color:lavenderblush;">.col-sm-3</div>
        </div>
    </div>
    <div class="container-fluid">
        <h1>Responsive Columns</h1>
        <p>Resize the browser window to see the effect.</p>
        <p>The columns will automatically stack on top of each other when the screen is less than 576px wide.</p>
        <div class="row">
            <div class="col-sm-3" style="background-color:lavender;">.col-sm-3</div>
            <div class="col-sm-3" style="background-color:lavenderblush;">.col-sm-3</div>
            <div class="col-sm-3" style="background-color:lavender;">.col-sm-3</div>
            <div class="col-sm-3" style="background-color:lavenderblush;">.col-sm-3</div>
        </div>
    </div>
    <div class="container-fluid">
        <h1>Responsive Columns</h1>
        <p>Resize the browser window to see the effect.</p>
        <p>The columns will automatically stack on top of each other when the screen is less than 576px wide.</p>
        <div class="row">
            <div class="col-sm-3" style="background-color:lavender;">.col-sm-3</div>
            <div class="col-sm-3" style="background-color:lavenderblush;">.col-sm-3</div>
            <div class="col-sm-3" style="background-color:lavender;">.col-sm-3</div>
            <div class="col-sm-3" style="background-color:lavenderblush;">.col-sm-3</div>
        </div>
    </div>
    <div class="container-fluid">
        <h1>Responsive Columns</h1>
        <p>Resize the browser window to see the effect.</p>
        <p>The columns will automatically stack on top of each other when the screen is less than 576px wide.</p>
        <div class="row">
            <div class="col-sm-3" style="background-color:lavender;">.col-sm-3</div>
            <div class="col-sm-3" style="background-color:lavenderblush;">.col-sm-3</div>
            <div class="col-sm-3" style="background-color:lavender;">.col-sm-3</div>
            <div class="col-sm-3" style="background-color:lavenderblush;">.col-sm-3</div>
            <pre>                                   </pre>

        </div>
    </div>
    <div class="bottom">


        <div>© 2018 Copyright:
            <a href="https://mdbootstrap.com/education/bootstrap/"> MDBootstrap.com</a>
        </div>


    </div>




    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.slim.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.15.0/umd/popper.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</body>

</html>

检查：https://jsfiddle.net/sugandhnikhil/yrogfwma/

Answer 3

这实际上不是Django问题。

从引导中检查此官方示例可能会有所帮助：

https://getbootstrap.com/docs/4.3/examples/sticky-footer/

Answer 4

html,
body {
  position: relative;
  height: 100%;
}

.page_con_wrap {
  position: relative;
  background-color: #ffffff;
  z-index: 2;
}

footer {
  background: #252429;
  padding-bottom: 0em;
  position: -webkit-sticky;
  position: sticky;
  bottom: 0;
  height: 50px;
  z-index: -1;
  color: #ffffff;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
  <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>

</head>

<body>
  <!--Navigation Start-->
  <nav class="navbar navbar-expand-md bg-dark navbar-dark">
    <!-- Brand -->
    <a class="navbar-brand" href="#">Navbar</a>

    <!-- Toggler/collapsibe Button -->
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
    <span class="navbar-toggler-icon"></span>
  </button>

    <!-- Navbar links -->
    <div class="collapse navbar-collapse" id="collapsibleNavbar">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
      </ul>
    </div>
  </nav>
  <!--Navigation End-->

  <!--Page Content Start-->
  <div class="page_con_wrap">
    <div class="container">
      <div class="row">
        <div class="col-12">
          <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
            It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently
            with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>

          <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
            It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently
            with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>

          <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
            It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently
            with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>

          <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
            It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently
            with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>

          <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
            It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently
            with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>

          <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
            It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently
            with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>

          <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
            It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently
            with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
        </div>
      </div>
    </div>
  </div>
  <!--Page Content End-->

  <!--Footer Content Start-->
  <footer>
    <div class="text-center">Copyright @2019 All rights reserved</div>
  </footer>
  <!--Footer Content End-->


</body>

</html>

如何在Bootstrap中添加页脚？

4 个答案: