Footer ниже содержания, но не плавающих в воздухе, если не хватает содержания

Question

Я получил этот код:

DEMO: http://jsfiddle.net/z21nz89d/2/

HTML:

<nav class="navbar navbar-default" role="navigation"> 
    <div class="container-fluid"> 
    <!-- Brand and toggle get grouped for better mobile display --> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> 
     <span class="sr-only">Toggle navigation</span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     </button> 
     <a class="navbar-brand" href="#">Brand</a> 
    </div> 

    <!-- Collect the nav links, forms, and other content for toggling --> 
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
     <ul class="nav navbar-nav"> 
     <li class="active"><a href="#">Link</a></li> 
     <li><a href="#">Link</a></li> 
     <li class="dropdown"> 
      <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a> 
      <ul class="dropdown-menu" role="menu"> 
      <li><a href="#">Action</a></li> 
      <li><a href="#">Another action</a></li> 
      <li><a href="#">Something else here</a></li> 
      <li class="divider"></li> 
      <li><a href="#">Separated link</a></li> 
      <li class="divider"></li> 
      <li><a href="#">One more separated link</a></li> 
      </ul> 
     </li> 
     </ul> 
     <form class="navbar-form navbar-left" role="search"> 
     <div class="form-group"> 
      <input type="text" class="form-control" placeholder="Search"> 
     </div> 
     <button type="submit" class="btn btn-default">Submit</button> 
     </form> 
     <ul class="nav navbar-nav navbar-right"> 
     <li><a href="#">Link</a></li> 
     <li class="dropdown"> 
      <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a> 
      <ul class="dropdown-menu" role="menu"> 
      <li><a href="#">Action</a></li> 
      <li><a href="#">Another action</a></li> 
      <li><a href="#">Something else here</a></li> 
      <li class="divider"></li> 
      <li><a href="#">Separated link</a></li> 
      </ul> 
     </li> 
     </ul> 
    </div><!-- /.navbar-collapse --> 
    </div><!-- /.container-fluid --> 
</nav> 
    <div class="container"> 
     <p>Here comes some content.</p> 
     <p>Here comes some content.</p> 
     <p>Here comes some content.</p> 
     <p>Here comes some content.</p> 
     <p>Here comes some content.</p> 
    </div> 
    <footer> 
     <div class="container"> 
      <div class="row"> 
       <div class="col-md-8"> 
        <p>Some footer-content</p> 
        <p>Some footer-content</p> 
        <p>Some footer-content</p> 
       </div> 
       <div class="col-md-4"> 
        <p>Some footer-content</p> 
        <p>Some footer-content</p> 
       </div> 
      </div> 
     </div> 
    </footer> 

CSS:

footer { 
    background-color: #eee; 
    padding-top: 15px; 
    padding-left: 15px; 
} 

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

Я хочу колонтитулы быть НИЖЕ всего содержания (так сказать, перечислен как самый последний), однако, если нет достаточного содержания мне нужно футер быть размещены в нижней части: 0 и слева: 0.

Я понятия не имею, как это осуществить. Мое первое предположение заключалось в том, чтобы использовать JavaScript, чтобы увидеть, сколько места есть и прокручивается ли сайт или нет.

Answer 1

Это самый простой способ найти хороший нижний колонтитул. Оберните все, кроме своего нижнего колонтитула, в «обертку» div. Затем установите html и высоту тела на 100%, с минимальной высотой 100% на вашей обертке. Затем вам нужно дать нижний край и нижнее дополнение к этой обертке, которая равна той же высоте, что и нижний колонтитул. Отлично работает.

Demo here

html, body { 
    height: 100%; 
} 
.wrapper { 
    min-height: 100%; 
    margin-bottom: -100px; 
    padding-bottom: 100px; 
} 
footer { 
    height: 100px; 
} 

Answer 2

Если вы действительно хотите сделать это яваскрипт путем, вы можете получить его с помощью этого кода:

http://jsfiddle.net/z21nz89d/6/

$(function() { 
    var windowHeight = $(window).height(); 
    var contHeight = $(".main-container").height(); 
    var footHeight = $("footer").height(); 
    var testHeight = windowHeight - footHeight; 

    if (contHeight < testHeight) { 
     $("footer").css("bottom", "0"); 
     $("footer").css("left", "0"); 
    } 
}); 

Убедитесь, что добавить следующий CSS правила, HTML, материал BODY очень важны.

html, body { 
    height: 100%; 
    width: 100%; 
    min-height: 100%; 
    padding: 0; 
    margin: 0; 
} 

Вы также должны обернуть весь ваш контекст КРОМЕ колонтитул в DIV с классом, скажем, «главный-контейнер», таким образом, вы можете проверить высоту всего тела В.С. высота содержимого минус нижний колонтитул, понимаете?

Это все JSFiddle.

Просто обратите внимание, что это действительно не семантический способ сделать это. По-моему, лучший липкий нижний колонтитул CSS. Если вы не можете использовать один, это будет работать.

Answer 3

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

Live Working Demo

HTML код:

<div id="wrapper"> 

    <div id="header"> 
     Header is here 
    </div><!-- #header --> 

    <div id="content"> 
     Content is here 
    </div><!-- #content --> 

    <div id="footer"> 
     Footer is here 
    </div><!-- #footer --> 

</div><!-- #wrapper --> 

CSS код:

html, 
body { 
    margin:0; 
    padding:0; 
    height:100%; 
} 
#wrapper { 
    min-height:100%; 
    position:relative; 
} 
#header { 
    background:#ededed; 
    padding:10px; 
    text-align:center; 
} 
#content { 
    padding-bottom:100px; /* Height of the footer element */ 
    text-align:center; 
} 
#footer { 
    background:#ffab62; 
    width:100%; 
    height:100px; 
    position:absolute; 
    bottom:0; 
    left:0; 
    text-align:center; 
} 

Результат:

Answer 4

решение с гибкой позиции здесь: https://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/

Answer 5

Если высота колонтитула неизвестна, то лучше использовать гибкий, что-то в линиях:

<body> 
    <header></header> 
    <div class="content"></div> 
    <footer></footer> 
</body> 

И для CSS это необходимо только:

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

И вам не нужно устанавливать отображение: flex to body, это может быть обертка внутри тела тоже.

Помните, что это может не работать в IE (см. Ссылку CanIUse ниже). Тем не менее, он работает очень хорошо!

CanIUse link
См. Например, this link.