This question has already been answered:
There are plenty of examples, but there is not a single one with an explanation.
This question has already been answered:
There are plenty of examples, but there is not a single one with an explanation.
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 .
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>
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>
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>
body { display: table; min-height: 100vh; } main { display: table-row; /* Чтобы ряд занимал всё оставшееся пространство, так как табличная разметка не позволит ему вытолкнуть header и footer */ height: 100%; }
<header> header </header> <main> content </main> <footer> footer </footer>
// Высчитываем высоту 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.
Source: https://ru.stackoverflow.com/questions/33753/
All Articles