Они очень похожи по функциональности.Первый принудительно устанавливает div на всю высоту страницы, а затем задает для него отрицательный отступ в размере нижнего колонтитула.
html, body {
height: 100%; /*set 100% height*/
}
.wrapper {
min-height: 100%; /*content 100% height of page */
height: auto !important;
height: 100%;
margin: 0 auto -142px; /* negative value causes wrappers height to become (height of page) minus 142px, just enough room for our footer */
}
.footer, .push {
height: 142px; /*Footer is the footer, push pushes the page content out of the footers way*/
}
Это гарантирует, что все содержимое внутри упаковочного div равно 100%.высоты страницы минус высота нижнего колонтитула.Таким образом, если размер нижнего колонтитула равен размеру отрицательного поля, он будет удерживаться в левом зазоре и отображаться в нижней части элемента.
Второй также приводит к тому, что содержимое будет на 100% высотыстраницы.
html, body {height: 100%;} /*set 100% height*/
#wrap {min-height: 100%;} /* make content 100% height of screen */
Затем создается пространство внизу основного содержимого того же размера, что и нижний колонтитул.
#main {overflow:auto;
padding-bottom: 150px;} /* wrapper still 100% height of screen but its content is forced to end 150px before it finishes (150px above bottom of screen) */
Затем с использованием относительного положения и отрицательного верхнего полязаставляет нижний колонтитул показываться на 150px над его обычной позицией (в только что выделенном месте).
#footer {position: relative;
margin-top: -150px; /* Make footer appear 150px above its normal position (in the space made by the padding in #main */
height: 150px;
clear:both;}
Примечание: Это работает только до тех пор, пока содержимое вашей страницы находится в пределах .wrapperи #main внутри #wrap соответственно, и ваш нижний колонтитул находится за пределами этих контейнеров.
Если вы не поняли какую-либо часть этого, оставьте мне комментарий, и я постараюсь ответить на него.
Редактировать: В ответ на user360122
HTML-разметка для первого:
<html>
<body>
<div class="wrapper">
<!--Page content goes here-->
<div class="push">
<!--Leave this empty, it ensures no overflow from your content into your footer-->
</div>
</div>
<div class="footer">
<!--Footer content goes here-->
</div>
<body>
</html>
HTML-разметка для второго:
<html>
<body>
<div id="wrap">
<div id="main">
<!--Page content goes here-->
</div>
</div>
<div id="footer">
<!--Footer content goes here-->
</div>
</body>
</html>
Не забудьтевключить таблицу стилей и объявить тип документа .etc (это не полные HTML-страницы).