Сделайте нижний колонтитул нижней части страницы

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

Моя основная структура div:

<div id="container">
    <div id="body"></div>
    <div id="footer"></div>
</div>

Мой соответствующий CSS (несколько сокращенный):

body {
    margin: 0;
    padding: 0;
    height: 100%;
}

html {
    margin: 0;
    padding: 0;
    height: 100%;
}

#container {
    width: 674px;
    min-height: 100%;
    height: 100%;
    position: relative;
    margin: 0 auto;
}

#body {
    width: 616px;
    padding: 5px 14px 5px 14px;
    margin: 0 auto;
    padding-bottom: 20px;
}

#footer {
    position: absolute;
    bottom: 0;
    width: 644px;
    height: 20px;
    margin: 0 auto;
}

ОТВЕТЫ

Ответ 1

Простейшим решением является использование min-height в <html> и положение <footer> с position:absolute;

Демо: jsfiddle и SO snippet:

html {
    position: relative;
    min-height: 100%;
}

body {
    margin: 0 0 100px;
    /* bottom = footer height */
    padding: 25px;
}

footer {
    background-color: orange;
    position: absolute;
    left: 0;
    bottom: 0;
    height: 100px;
    width: 100%;
    overflow: hidden;
}
<article>
    <!-- or <div class="container">, etc. -->
    <h1>James Dean CSS Sticky Footer</h1>
    <p>Blah blah blah blah</p>
    <p>More blah blah blah</p>
</article>
<footer>
    <h1>Footer Content</h1>
</footer>

Ответ 2

Почему бы не использовать: { position: fixed; bottom: 0 }?

Ответ 3

Простое решение, которое я использую, работает от IE8 +

Дайте минимальную высоту: 100% на html, так что если содержимое меньше, тем не менее, страница занимает полные высоты и нижние колонтитулы в нижней части страницы. Когда контент увеличивается, нижний колонтитул сдвигается вниз с содержимым и продолжает придерживаться снизу.

JS fiddle working Demo: http://jsfiddle.net/3L3h64qo/2/

Css

html{
  position:relative; 
  min-height: 100%;
}
/*Normalize html and body elements,this style is just good to have*/
html,body{
  margin:0;
  padding:0;
}
.pageContentWrapper{
  margin-bottom:100px;/* Height of footer*/
} 
.footer{
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height:100px;
    background:#ccc;
}

Html

   <html>
    <body>
        <div class="pageContentWrapper">
            <!-- All the page content goes here-->
        </div>
        <div class="footer">
        </div>
    </body>
    </html>

Ответ 4

сделайте это, используя встроенный код jQuery в <head></head>

<script type="text/javascript">
$(document).ready(function() { 
    var docHeight = $(window).height();
    var footerHeight = $('#footer').height();
    var footerTop = $('#footer').position().top + footerHeight;  
    if (footerTop < docHeight) {
        $('#footer').css('margin-top', 10 + (docHeight - footerTop) + 'px');
    }
});
</script>

Ответ 5

Используйте это. Это исправит.

#ibox_footer {
    padding-top: 3px; 
    position: absolute;
    height: 20px;
    margin-bottom: 0;
    bottom: 0;
    width: 100%;
}

Ответ 6

Это должно помочь вам.

* {
    margin: 0;
}
html, body {
    height: 100%;
}
.wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -155px; /* the bottom margin is the negative value of the footer height */
}
.footer {
    height: 155px;
}

Ответ 7

Самый простой взлом - установить min-height в свой контейнер страницы на 400 пикселей при условии, что ваш нижний колонтитул окажется в конце. вам даже не нужно ставить css для нижнего колонтитула или просто width:100%, если ваш нижний колонтитул является прямым дочерним элементом вашего <body>

Ответ 8

Используйте min-height как некоторое значение пикселя вместо%. Подобно:   мин-высота: 620px;   высота: авто;

и нижний колонтитул как:

.footer {
height:70px;
clear:both;
position:relative;
bottom:0;
width: 100%;
}

Ответ 9

Используемая модель очень похожа на Ryan Fait StickyFooter http://ryanfait.com/sticky-footer

В этом обсуждении пока отсутствует один div, и модель, предложенная здесь Кеннетом Паланганасом, отлично работала для локального дизайна Win81 в течение примерно 48 часов, а затем в ie/chrome рухнула по неизвестной причине). Ryan "push" div удовлетворит некоторые неохотные браузеры. Заметим, что px обычно, однако, для жидкой компоновки макета, em может быть предпочтительным.

* { border: 0; margin: 0; padding: 0; }
html, body { height: 100%; }
.wrapper { height: auto !important; height: 100%; margin: 0 auto -1em; min-height: 100%; }
.footer, .push { height: 1em; }

<div class="wrapper"><p>Your website content here.</p>
<div class="push"></div>
</div>
<div class="footer"><p>This is a footer</p>
</div>

Ответ 10

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

function fix_layout(){
  //increase content div length by uncommenting below line
  //expandContent();
  
    var wraph = document.getElementById('wrapper').offsetHeight;
    if(wraph<window.innerHeight){ //if content is less than screenheight
        var headh   = document.getElementById('header').offsetHeight;
        var conth   = document.getElementById('content').offsetHeight;
        var footh   = document.getElementById('footer').offsetHeight;
        //var foottop = window.innerHeight - (headh + conth + footh);
        var foottop = window.innerHeight - (footh);
        $("#footer").css({top:foottop+'px'});
    }
}

function expandContent(){
  $('#content').append('<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at ante. Mauris eleifend, quam a vulputate dictum, massa quam dapibus leo, eget vulputate orci purus ut lorem. In fringilla mi in ligula. Pellentesque aliquam quam vel dolor. Nunc adipiscing. Sed quam odio, tempus ac, aliquam molestie, varius ac, tellus. Vestibulum ut nulla aliquam risus rutrum interdum. Pellentesque lorem. Curabitur sit amet erat quis risus feugiat viverra. Pellentesque augue justo, sagittis et, lacinia at, venenatis non, arcu. Nunc nec libero. In cursus dictum risus. Etiam tristique nisl a nulla. Ut a orci. Curabitur dolor nunc, egestas at, accumsan at, malesuada nec, magna.</p>'+

'<p>Nulla facilisi. Nunc volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Ut sit amet orci vel mauris blandit vehicula. Nullam quis enim. Integer dignissim viverra velit. Curabitur in odio. In hac habitasse platea dictumst. Ut consequat, tellus eu volutpat varius, justo orci elementum dolor, sed imperdiet nulla tellus ut diam. Vestibulum ipsum ante, malesuada quis, tempus ac, placerat sit amet, elit.</p>'+

'<p>Sed eget turpis a pede tempor malesuada. Vivamus quis mi at leo pulvinar hendrerit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque aliquet lacus vitae pede. Nullam mollis dolor ac nisi. Phasellus sit amet urna. Praesent pellentesque sapien sed lacus. Donec lacinia odio in odio. In sit amet elit. Maecenas gravida interdum urna. Integer pretium, arcu vitae imperdiet facilisis, elit tellus tempor nisi, vel feugiat ante velit sit amet mauris. Vivamus arcu. Integer pharetra magna ac lacus. Aliquam vitae sapien in nibh vehicula auctor. Suspendisse leo mauris, pulvinar sed, tempor et, consequat ac, lacus. Proin velit. Nulla semper lobortis mauris. Duis urna erat, ornare et, imperdiet eu, suscipit sit amet, massa. Nulla nulla nisi, pellentesque at, egestas quis, fringilla eu, diam.</p>'+

'<p>Donec semper, sem nec tristique tempus, justo neque commodo nisl, ut gravida sem tellus suscipit nunc. Aliquam erat volutpat. Ut tincidunt pretium elit. Aliquam pulvinar. Nulla cursus. Suspendisse potenti. Etiam condimentum hendrerit felis. Duis iaculis aliquam enim. Donec dignissim augue vitae orci. Curabitur luctus felis a metus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In varius neque at enim. Suspendisse massa nulla, viverra in, bibendum vitae, tempor quis, lorem.</p>'+

'<p>Donec dapibus orci sit amet elit. Maecenas rutrum ultrices lectus. Aliquam suscipit, lacus a iaculis adipiscing, eros orci pellentesque nisl, non pharetra dolor urna nec dolor. Integer cursus dolor vel magna. Integer ultrices feugiat sem. Proin nec nibh. Duis eu dui quis nunc sagittis lobortis. Fusce pharetra, enim ut sodales luctus, lectus arcu rhoncus purus, in fringilla augue elit vel lacus. In hac habitasse platea dictumst. Aliquam erat volutpat. Fusce iaculis elit id tellus. Ut accumsan malesuada turpis. Suspendisse potenti. Vestibulum lacus augue, lobortis mattis, laoreet in, varius at, nisi. Nunc gravida. Phasellus faucibus. In hac habitasse platea dictumst. Integer tempor lacus eget lectus. Praesent fringilla augue fringilla dui.</p>');
}
/*sample CSS*/
body{ background: black; margin: 0; }
#header{ background: grey; }
#content{background: yellow; }
#footer{ background: red; position: absolute; }

#header, #content, #footer{ display: inline-block; width: 100vw; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body onload="fix_layout()">
        <div id="wrapper">
            <div id="header" class="navbar navbar-inverse navbar-fixed-top" role="navigation">
                [some header elements here]
            </div>
            <div id="content" class="container">
              [some content elements here]
              
              
            </div>
            <div id="footer" class="footer">
                [some footer elements here]
            </div>
        </div>
    </body>