This question has already been answered:

There are plenty of examples, but there is not a single one with an explanation.

Reported as a duplicate by participants Vadizar , Sasha Chernykh , Air , Arsen , 0xdb Apr 7 '18 at 21:03 .

A similar question was asked earlier and an answer has already been received. If the answers provided are not exhaustive, please ask a new question .

3 answers 3

Like that:

* {margin: 0;} html, body {height: 100%;} .wrapper { min-height: 100%; height: auto !important; height: 100%; margin: 0 auto -97px; /* margin-bottom должен быть отрицательным со значением height у .footer, .push */ } .footer, .push {height: 97px;} /* значение должно равняться margin-bottom у .wrapper (положительное число) */ 
 <div class="wrapper"> <!-- CONTENT --> <div class="push"><!-- NO CONTENT --></div> </div> <div class="footer"> <!-- CONTENT --> </div>

  • @Vadizar tell me, the better was the answer from your edit? It seems to be nothing. If you want to benefit - wrap the code in a snippet, this is really not enough here. - Nick Volynkin ♦
  • @NickVolynkin is just a code without any comment scares people. I think it is wrong and I think you will agree to leave the canvas of the code without comments. PS Wrapped in a snippet. - Vadizar
  • @NickVolynkin let's continue the discussion in the chat and I will explain to you my position and we will decide whether to do so or not. - Vadizar

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>

    Generator HTML + CSS templates - here take, create a template, there is a function of pressing the footer. And then pull it out of the code.

    • Thanks, but the result is not so interesting to me, I want to understand - sasha
    • If you look at the result, it is not difficult to understand. - trane294 pm
    • There is a lot of incomprehensible things, I try to understand, but I can't. - sasha