DIV 底部的页脚而不是页面底部。引导程序

Posted 2023-03-21

技术标签:

【中文标题】DIV 底部的页脚而不是页面底部。引导程序【英文标题】：Footer at the bottom of DIV not bottom of page. Bootstrap 【发布时间】：2021-01-19 03:57:35 【问题描述】：

我希望页脚位于页面底部。不在其所在的 DIV 内容的底部。但我还希望页脚在打开和关闭页面上的侧栏时动态调整大小。

我花了太长时间尝试所有可以在谷歌上找到的选项，但没有运气。我管理的最好的方法是让页脚横跨整个页面，包括重叠侧边栏，这不是我想要的。

旁注：

我还希望主要内容不要在页脚下方滚动并在上方停止。即如果这很容易实现，则此 div 的滚动条将在页脚上方停止？

看看 Facebook messenger web 就是一个完美的例子。左侧边栏和中心内容是我要查找的内容。

有人可以帮忙吗？

这里的示例 jsfille：

https://jsfiddle.net/pwdt95u8/1/

代码：

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

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- CSS only -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
          integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">

    <!-- JS, Popper.js, and jQuery -->
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
            integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
            crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"
            integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN"
            crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"
            integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV"
            crossorigin="anonymous"></script>
    <script src="https://kit.fontawesome.com/c551403873.js" crossorigin="anonymous"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/socket.io/2.2.0/socket.io.js"
            integrity="sha256-yr4fRk/GU1ehYJPAs8P4JlTgu0Hdsp4ZKrx8bDEDC3I=" crossorigin="anonymous"></script>

    <!-- Custom styles for this template -->
    <link href="../static/css/simple-sidebar.css" rel="stylesheet">

</head>

<body>

<div class="d-flex" id="wrapper">

    <!-- Sidebar -->
    <div class="bg-light border-right" id="sidebar-wrapper">
        <div class="sidebar-heading">Start Bootstrap</div>
        <div class="list-group list-group-flush">
            <a href="#" class="list-group-item list-group-item-action bg-light">Dashboard</a>
            <a href="#" class="list-group-item list-group-item-action bg-light">Shortcuts</a>
            <a href="#" class="list-group-item list-group-item-action bg-light">Overview</a>
            <a href="#" class="list-group-item list-group-item-action bg-light">Events</a>
            <a href="#" class="list-group-item list-group-item-action bg-light">Profile</a>
            <a href="#" class="list-group-item list-group-item-action bg-light">Status</a>
        </div>
    </div>
    <!-- /#sidebar-wrapper -->

    <!-- Page Content -->
    <div id="page-content-wrapper">

        <nav class="navbar navbar-expand-lg navbar-light bg-light border-bottom">
            <button class="btn btn-primary" id="menu-toggle">Toggle Menu</button>

            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
                    aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>

            <div class="collapse navbar-collapse" id="navbarSupportedContent">
                <ul class="navbar-nav ml-auto mt-2 mt-lg-0">
                    <li class="nav-item active">
                        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Link</a>
                    </li>
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"
                           data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            Dropdown
                        </a>
                        <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
                            <a class="dropdown-item" href="#">Action</a>
                            <a class="dropdown-item" href="#">Another action</a>
                            <div class="dropdown-divider"></div>
                            <a class="dropdown-item" href="#">Something else here</a>
                        </div>
                    </li>
                </ul>
            </div>
        </nav>

        <div class="container-fluid h-100">
            <h1 class="mt-4">Simple Sidebar</h1>
            <div class="row text-left w-50">
            TEST


              <footer id="sticky-footer" class="float-bottom card-footer py-4 bg-dark text-white-50">
                <div class="container text-center">
                  <small>Copyright &copy; Your Website</small>
                </div>
              </footer>


        </div>
    </div>  <!-- /#page-content-wrapper -->

</div>
<!-- Footer -->



<!-- Menu Toggle Script -->
<script>
    $("#menu-toggle").click(function (e) 
        e.preventDefault();
        $("#wrapper").toggleClass("toggled");
    );
</script>

</body>

</html>

【问题讨论】：

不要将页脚包裹在 div 中。将其从 div 中排除，并将其保留为自己的对象，只有 body 作为父对象。然后给它一个position: sticky 和bottom: 0; 可能与此重复：***.com/questions/42294/… 【参考方案1】：

这最好用 CSS Grids 解决。其实不需要太多改动。我已将页脚移动为 body 元素的最后一个子元素，并在 body 样式规则中添加了一些属性。（我还进行了一些编辑，例如将 JQuery 切换为 Vanilla JS）

我添加了 toggle text 按钮，以便您可以轻松地在主要内容区域内切换文本。

Here 是相同代码的 JFiddle。

document.getElementById('menu-toggle').addEventListener('click', () => 
  document.getElementById('wrapper').classList.toggle('toggled');
);


document.getElementById('text-toggle').addEventListener('click', () => 
  document.getElementById('lorem-ipsum').classList.toggle('hide-text');
);

body 
  display: grid;

  /*  last row is footer and takes whatever is its natural height.
   *  first row is rest of content and stretches to fill available space
   */ 

  grid-template-rows: 1fr auto;
  min-height: 100vh;


#wrapper 
  overflow-x: hidden;


#sticky-footer 
  flex-shrink: none;


#sidebar-wrapper 
  margin-left: -15rem;
  transition: margin 0.25s ease-out;


#sidebar-wrapper .sidebar-heading 
  padding: 0.875rem 1.25rem;
  font-size: 1.2rem;


#sidebar-wrapper .list-group 
  width: 15rem;


#page-content-wrapper 
  min-width: 100vw;


.hide-text 
  display: none;


#wrapper.toggled #sidebar-wrapper 
  margin-left: 0;


@media (min-width: 768px) 
  #sidebar-wrapper 
    margin-left: 0;
  

  #page-content-wrapper 
    min-width: 0;
    width: 100%;
  

  #wrapper.toggled #sidebar-wrapper 
    margin-left: -15rem;

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

  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">

    <link href="main.css" rel="stylesheet"/>
  </head>

  <body>

    <div class="d-flex" id="wrapper">

      <div class="bg-light border-right" id="sidebar-wrapper">
        <div class="sidebar-heading">Start Bootstrap</div>
        <div class="list-group list-group-flush">
          <a href="#" class="list-group-item list-group-item-action bg-light">Dashboard</a>
          <a href="#" class="list-group-item list-group-item-action bg-light">Shortcuts</a>
          <a href="#" class="list-group-item list-group-item-action bg-light">Overview</a>
          <a href="#" class="list-group-item list-group-item-action bg-light">Events</a>
          <a href="#" class="list-group-item list-group-item-action bg-light">Profile</a>
          <a href="#" class="list-group-item list-group-item-action bg-light">Status</a>
        </div>
      </div>

      <div id="page-content-wrapper">

        <nav class="navbar navbar-expand-lg navbar-light bg-light border-bottom">
          <button class="btn btn-primary" id="menu-toggle">Toggle Menu</button>
        </nav>

        <div class="container-fluid">
          <h1 class="mt-4">Simple Sidebar</h1>
          <div class="p1">
            TESTing
            <br/>
            <button class="btn btn-primary" id="text-toggle">toggle text</button>
            <div id="lorem-ipsum">
            <p>

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            </p>
            <p>

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            </p>
            <p>

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            </p>
            </div>
          </div>
        </div>
      </div>
    </div>

    <footer id="sticky-footer" class="float-bottom card-footer py-4 bg-dark text-white-50">
      <div class="container text-center">
        <small>Copyright &copy; Your Website</small>
      </div>
    </footer>
    <script src="main.js"></script>
  </body>

</html>

【讨论】：

以上是关于DIV 底部的页脚而不是页面底部。引导程序的主要内容，如果未能解决你的问题，请参考以下文章

Angular 中的响应式页脚，带有始终位于页面底部的引导程序。不粘

将页脚刷新到页面底部，twitter bootstrap