I need to make a sticky footer whose height is not fixed. Made with this code:

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

But there was a problem enter image description here I need the background image to be the end of the page, but if I add a height: 100%; block with the background height: 100%; then a vertical scroll appears, so the block becomes the height of the body . How can this be fixed? Location of blocks

 body header div class="full-width full-width-bg" //здесь фон footer class="footer "

2 answers 2

1. Solution through absolute positioning for a fixed footer height

 html { /* Растягиваем документ на всю высоту окна */ height: 100%; } body { position: relative; /* Растягиваем body по высоте html */ min-height: 100%; } main { /* Выставляем отступ с высотой footer */ padding-bottom: 30px; } footer { /* Позиционируем footer внизу main */ position: absolute; bottom: 0; width: 100%; /* Высота footer */ height: 30px; } 
 <body> <header> header </header> <main> content </main> <footer> footer </footer> </body>

2. Solution via Flexbox for adaptive footer height

 body { display: flex; flex-direction: column; min-height: 100vh; } main { /* Чтобы занимал оставшееся пространство */ flex-grow: 1; } footer { /* Чтобы footer не уменьшался */ flex-shrink: 0; } 
 <header> header </header> <main> content </main> <footer> footer </footer>

3. Solution through tables for adaptive footer height

 body { display: table; min-height: 100vh; } main { display: table-row; /* Чтобы ряд занимал всё оставшееся пространство, так как табличная разметка не позволит ему вытолкнуть header и footer */ height: 100%; } 
 <header> header </header> <main> content </main> <footer> footer </footer>

4. Solution using jQuery for adaptive footer height

 // Высчитываем высоту footer и делаем соответствующий отступ от main: function footer(){ $('main').css('padding-bottom',$('footer').height()); } window.addEventListener('load',footer); window.addEventListener('resize',footer); 
 html { /* Растягиваем документ на всю высоту окна */ height: 100%; } body { position: relative; /* Растягиваем body по высоте html */ min-height: 100%; } main { /* Выставляем отступ с высотой footer по умолчанию */ padding-bottom: 30px; } footer { /* Позиционируем footer внизу main */ position: absolute; bottom: 0; width: 100%; /* Высота footer по умолчанию */ height: 30px; } 
 <html> <head> <script src='https://code.jquery.com/jquery-3.1.1.slim.min.js'></script> </head> <body> <header> header </header> <main> main </main> <footer> footer </footer> </body> </html>

  • Thank! The second option is cool, only ie does not want to support. - Alexander Alekseev

 * { padding: 0; margin: 0; } .container { display: flex; flex-direction: column; width: 100vw; min-height: 100vh; } header, main, footer { display: block; } header { background-color: red; flex: 0 0 10vh; } main { background-color: green; flex: 8 0; } footer { background-color: blue; flex: 1 0; min-height: 10vh; } 
 <div class="container"> <header></header> <main></main> <footer> </footer> </div>