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

420
24 ноября 2016, 10:05

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

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

CSS:

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

HTML:

<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 сейчас:

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

Answer 1

Если Вы используете 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 
    </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("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>

Answer 2

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

Answer 3

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

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;
}
READ ALSO
media query перемещение блока
CSS

media query перемещение блока

У меня такая проблема при @media screen and (max-width:620px) я хочу чтобы <article> был снизу sidebar-а но никак не получается. .

385
Change background-color of div when radio button is checked [требует правки]
CSS

Change background-color of div when radio button is checked [требует правки]

How to change background-color (and other css) of div when radio button is checked? I mean when id="custom_radio" is checked need to change class color-box. Thanks.

345
Как выделить заранее заданные слова на веб странице?
CSS

Как выделить заранее заданные слова на веб странице?

Имеем:.

430
Как получить картинку из бинарника?
jQuery

Как получить картинку из бинарника?

Здравствуйте прошу совета. У меня есть БД, я храню там картинки в бинарном виде.

502