Нижний колонтитул в Bootstrap, который расширяется с содержанием или прилипает к нижней части

Я искал способ добавить нижний колонтитул в проект Twitter Bootstrap 3, над которым я работаю.

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

Все решения, которые я нашел и попробовал до сих пор, либо не работали, либо показывали нижний колонтитул ВСЕГДА, либо нижний колонтитул находился ниже страницы, поэтому он был виден только при прокрутке.

Заранее спасибо!

Источник

2 ответа

Решение

Обновление 2017

Существует разница между "фиксированным" и "липким" нижним колонтитулом... вам нужен липкий нижний колонтитул.

Bootstrap 3

Используйте стандартный пример "Липкий нижний колонтитул". Этот метод оборачивает все содержимое страницы и опускает нижний колонтитул.

Вот рабочая демонстрация: http://bootply.com/93620

<!-- Wrap all page content -->
<div id="wrap">
  <!-- Fixed navbar -->
  <div class="navbar navbar-default navbar-fixed-top">
   ...
  </div>
  <div class="container">    
    <!-- page content -->
  </div>
</div>
<div id="footer">
  Footer
</div>

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

html,
body {
  height: 100%;
  /* The html and body elements cannot have any padding or margin. */
}

/* Wrapper for page content to push down footer */
#wrap {
  min-height: 100%;
  height: auto !important;
  height: 100%;
  /* Negative indent footer by its height */
  margin: 0 auto -60px;
  /* Pad bottom by footer height */
  padding: 0 0 60px;
}

/* Set the fixed height of the footer here */
#footer {
  height: 60px;
  background-color: #f5f5f5;
}

Bootstrap 4

Поскольку flexbox по умолчанию используется в Bootstrap 4, "липкий" нижний колонтитул проще.

<wrapper class="d-flex flex-column">
    <nav>
    </nav>
    <main>
    </main>
    <footer>
    </footer>
</wrapper>

body, wrapper {
   min-height:100vh;
}

main {
    flex:1;
}

Демо: Bootstrap 4 Sticky Footer

Источник

CSS

 /*Sticky footer*/
    form , html, body {height: 100%;}
    body{background-color:inherit;}
    .wrapper{min-height:100%;height:auto!important;height:100%;margin:0 auto -4em}
    .footer,.push{height:4em}

Если вы не используете ASP.NET, вы можете удалить форму {height:100%} из CSS

HTML

<body>

<div class="wrapper">
    ....Content....
    <div class="push"></div>
</div>

<div class="footer">
   <div class="container">
     <hr /> 
     <span>copyright 2014 | menelabs</span>

   </div>
</div>
 </body>
Источник

В наши дни почти все браузеры поддерживают единицы просмотра. Так что использовал его, чтобы получить липкий нижний колонтитул. У меня это сработало.

Вы можете проверить поддержку области просмотра здесь.

Отрегулируйте минимальную высоту для желаемого положения нижнего колонтитула, когда нет содержимого.

#main {
   min-height: 70vh;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

<div id="header" class="bg-secondary">Header: Sticky footer example</div>

<div id="main" class="bg-light">   
     <!-- Nav tabs -->
  <ul class="nav nav-tabs">
    <li class="nav-item">
      <a class="nav-link active" data-toggle="tab" href="#home">Less content</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" data-toggle="tab" href="#menu1">No content</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" data-toggle="tab" href="#menu2">More content</a>
    </li>
  </ul>

  <!-- Tab panes -->
  <div class="tab-content">
    <div class="tab-pane container active" id="home">
      <p>Content 1: Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs.</p>
    </div>
    <div class="tab-pane container fade" id="menu1">
    </div>
    <div class="tab-pane container fade" id="menu2">
      <p>Content 0</p>
      <p>Content 1</p>
      <p>Content 2</p>
      <p>Content 3</p>
      <p>Content 4</p>
      <p>Content 5</p>
      <p>Content 6</p>
    </div>
  </div>   
</div>


<div id="footer" class="bg-secondary">
   Footer
</div>

Источник
Другие вопросы по тегам