<html>
<head>
<meta charset="utf-8" />
<title>Прибить подвал к низу сайта.</title>
<style>
* { margin: 0; }
html, body { height: 100%; }
.page-wrap {
min-height: 100%;
margin-bottom: -142px; /* равен высоте подвала */
}
.page-wrap:after {
content: "";
display: block;
}
.site-footer, .page-wrap:after {
height: 142px;
}
.site-footer {
background: orange;
}
</style>
</head>
<body>
<div class="page-wrap">
Контент!
</div>
<footer class="site-footer">
I'm the Sticky Footer.
</footer>
</body>
</html>
Сначала мы задаем высоту html и body равной высоте страницы:
html, body { height: 100%; }
Добавить комментарий