Самозагрузка 4: при прокрутке вверх липкий нижний колонтитул исчезает - PullRequest
Новая
       33

Самозагрузка 4: при прокрутке вверх липкий нижний колонтитул исчезает

0 голосов
/ 12 июня 2018

Я создал страницу, на которой недостаточно содержимого, чтобы полностью опустить нижний колонтитул.Поэтому я создал .wrapper вокруг содержимого и добавил класс .fixed-bottom загрузчика в нижний колонтитул, чтобы липкий нижний колонтитул был прикреплен к нижней части моего окна просмотра.

Я хочу, чтобы липкий нижний колонтитул исчезал, как только он касался нижней части последнего контейнера содержимого, вместо того чтобы располагать его над содержимым, когда я уменьшал окно браузера.

См. Перо липкий нижний колонтитул Фердинанд Хубер ( @ 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>

1 Ответ

0 голосов
/ 13 июня 2018

Понял, как это сделать: я удалил класс .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;
}
См. Перо лучший липкий нижний колонтитул от ferdinand huber ( @ fdhu ) на CodePen .
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...