Не удается закрепить footer

Question

Не получается закрепить footer.

Я пытался задать минимальную высоту странице вот так, чтобы footer выводился в конце:

CSS и HTML:

html,
body {
  height: calc(100% - 90px)/* 90 - высота navbar и footer */
}
.bottom-bar {
  postion: absolute;
  bottom: 45px;
}

<body>
  <navbar></navbar>
  <div class="container" style="padding-top: 20px">
    <div ng-view></div>
  </div>
  <div class="bottom-bar">
    <div class="container">
      <div class="col-xs-8 column">
        <!-- content -->
      </div>
      <div class="col-xs-4 col-md-4 column">
        <!-- content -->
      </div>
    </div>
  </div>
</body>

В принципе, это работает, но есть одна ошибка - когда body растягивается, позиция footera не меняется. Как это исправить?

Вот так выводится footer сейчас:

А вот так должен выводится:

Что значит "когда body растягивается"? — Denys Siebov, Nov 23 '16 at 12:44
В него динамически добавляются элементы. — Илья Бизунов, Nov 23 '16 at 12:47
Возможный дубликат вопроса: Как всегда прижимать footer к низу экрана? — , Mar 29 '17 at 10:56
@ИльяБизунов у вас опечатка в css postion ===> position — Dev18, May 11 '23 at 12:53

SVE · Answer 1 · 2016-11-23T13:48:27.643

Если Вы используете bootstrap, то footer добавить класс navbar-fixed-bottom:

if( $(document).height() <= $(window).height() ){  
  $(".bottom-bar").addClass("navbar-fixed-bottom");
}

<script src="https://code.jquery.com/jquery-2.0.3.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.min.css" />
<navbar>Navbar</navbar>
<div class="container" style="padding-top: 20px">
  <div ng-view></div>
Content
</div>
<div class="bottom-bar">
  bottom-bar
  <div class="container">
    <div class="col-xs-8 column"> 
      <!-- content -->
    </div>
    <div class="col-xs-4 col-md-4 column">
      <!-- content -->
    </div>
  </div>
</div>

С контентом:

if( $(document).height() <= $(window).height() ){  
  $(".bottom-bar").addClass("navbar-fixed-bottom");
}

<script src="https://code.jquery.com/jquery-2.0.3.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.min.css" />
    <navbar>Navbar</navbar>
    <div class="container" style="padding-top: 20px; height: 1500px;">
        <div ng-view></div>
  Content
&lt;/div&gt;

&lt;div class="bottom-bar"&gt;
  bottom-bar
    &lt;div class="container"&gt;
        &lt;div class="col-xs-8 column"&gt; 
            &lt;!-- content --&gt;
        &lt;/div&gt;
        &lt;div class="col-xs-4 col-md-4 column"&gt;
            &lt;!-- content --&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;</code></pre>

Кастомно:

if( $(document).height() <= $(window).height() ){  
  $(".bottom-bar").addClass("fixed");
}

.fixed {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
}

<script src="https://code.jquery.com/jquery-2.0.3.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.min.css" />
<navbar>Navbar</navbar>
<div class="container" style="padding-top: 20px">
  <div ng-view></div>
Content
</div>
<div class="bottom-bar">
  bottom-bar
  <div class="container">
    <div class="col-xs-8 column"> 
      <!-- content -->
    </div>
    <div class="col-xs-4 col-md-4 column">
      <!-- content -->
    </div>
  </div>
</div>

Нет-нет, мне не нужен фиксированный футер. Попробую еще раз объяснить - если контент на странице занимает мала места по высоте - нужно вывести футер как на втором скрине. Если контента много - он должен быть в конце страницы. — Илья Бизунов, Nov 23 '16 at 13:38

score 0 · Answer 2 · answered Nov 23 '16 at 12:54

0

минимальная высота элементу задается через css-свойство min-height

answered Nov 23 '16 at 12:54

Stalker

533

С min-height не работает. – Илья Бизунов Nov 23 '16 at 13:04

score 0 · Answer 3 · answered Nov 23 '16 at 12:58

0

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

HTML:

<html>
  <body class="page-body">
    <main role="main" class="page-content"></main>
    <footer class="page-footer"></footer>
  </body>
</html>

CSS:

.page-body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.page-content {
  flex-grow: 1;
}

answered Nov 23 '16 at 12:58

Sasha Omelchenko

12,818

Да, я и флексбоксами пробовал - все арвно не получается. Не могу понять в чем проблема. Я прикрепил скриншоты в вопрос, может быть, посмотрев на них станет понятнее о чем я говорю. – Илья Бизунов Nov 23 '16 at 13:11

score 0 · Answer 4 · answered Nov 24 '16 at 16:04

Все оказалось совсем просто. Я задал минимальную высоту не html и body, а контейнеру который в иерархии страницы находится выше, чем футер.

body > .container {
    min-height: calc(100vh - 177px);
}

Не удается закрепить footer

4 Answers4