Question

我创建了一个页面，它没有足够的内容将我的页脚一直推到底部。所以我在内容周围创建了一个.wrapper，并在页脚中添加了bootstrap的.fixed-bottom类，以便在我的视口底部附加一个粘性页脚。

我想要的是粘性页脚在触及最后一个内容容器的底部时会消失，而不是在我减少浏览器窗口时将其置于内容之上。

请参阅sticky footer上ferdinand huber（@fdhu）的笔CodePen。

<!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">
    <title>sticky footer</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">

<style>
footer {background: lightgrey;}
</style>

</head>

<body>

<div class="wrapper">
  <main> 
   <section>
      <div class="container-fluid">
       <div class="row">
        <div class="col-12">
           <h1>Help!</h1>
           <p>Lorem ipsum dolor sit amet, consectetur adipisicing 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>
    </section>
  </main>
</div> 

<!-- FOOTER -->
<div class="fixed-bottom">
  <footer class="footer">
    <div class="container-fluid">
      <nav class="navbar nav-footer navbar-expand">
      <!-- NAV-MENU -->
        <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
          <div class="navbar-nav">
            <div class="nav-item">
             <a class="nav-link" href="#">about</a>
            </div>
            <div class="nav-item">
               <a class="nav-link" href="#">imprint</a>
            </div> 
          </div>
        </div>
      </nav>
    </div> 
  </footer>
</div>

</body>

</html>

Answer 1

想出如何做到这一点：我删除了.fixed-bottom类和.wrapper我的内容

相反，我添加了以下css：

html {
      position: relative;
      min-height: 100%;
}

body {
      margin-bottom: 40px; /* Margin bottom by footer height */
}

.footer {
         position: absolute;
         bottom: 0; 
         width: 100%;
         height: 40px; /* Set the fixed height of the footer here */
         line-height: 0.5; /* aligns type in footer-container */
         background-color: #f5f5f5;
}

请参阅better sticky footer上ferdinand huber（@fdhu）的笔CodePen。

bootstrap 4：滚动时使粘性页脚消失

1 个答案: