Как приклеить подвал к низу экрана?

Question

Как прилепить подвал именно к низу экрана, а не страницы, потому что я везде только и вижу, как все пишут, что для этого надо написать margin-top: -50px; но это опускает подвал только в самый низ страницы, а не экрана. А мне надо, если инфы мало, подвал был бы внизу, а как инфы уже больше, чем экран, то тогда уже по высоте странице двигался.

Как выглядит сейчас подвал:

alt text

CSS код футера:

#foot {
    background-color: green;
    border-radius: 5px;
    clear: both;
    height: 35px;
    margin: -50px auto 0px;
    position: relative;
}

Если не получается вручную сделать, то попробуйте с помощью генератора шаблонов. Заодно, посмотрите, готовую разметку и CSS. — Deonis, Sep 22 '12 at 19:27
Попробовал, взял весь код футера, и заменил, тоже самое. — Angus123, Sep 22 '12 at 19:36
Очень сомневаюсь, что пробывали. Точнее, может код для футера и взяли, но только надо учитывать, что некоторые другие стили элементов, так же влияют на его положение. Выложите ваш код на http://jsfiddle.net/ — Deonis, Sep 22 '12 at 19:42
К выше сказанному могу посоветовать csstemplater.com — acidernt, Jan 13 '13 at 18:58
Вот ссылка: Как прижать футер (подвал) к низу. Тут вроде то, что Вам нужно, с пояснениями и примером. Может поможет. — Karalahti, Oct 16 '12 at 12:46
Возможный дубликат вопроса: Как прижимать footer всегда к низу экрана? — MobiDevices, Feb 07 '17 at 19:19

score 3 · Answer 1 · edited Dec 16 '15 at 16:23

Конечно с запозданием, но вот Вам готовое решение:

body, html {
  width: 100%;
  height: 100%;
}
.wrapper {
  width: 100%;
  min-height: 100%;
}
header {
  width: 100%;
  height: 70px;
  background: black;
  color: #fff;
}
footer {
  width: 100%;
  height: 50px;
  background: #000;
  color: #fff;
  margin-top: -50px;
}

<div class="wrapper">
  <header>HEADER</header>
  <div class="content"></div>
</div>
<footer>FOOTER</footer>

Пример на jsfiddle

Smash · Answer 2 · 2012-09-22T20:05:36.863

min-height блоку с контентом ставили?

Как для примера:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<style type="text/css">
html, body {
    margin: 0;
    padding: 0;
    height: 100%;
}
h1 {
    margin:0;
    text-align:center;
}
#container {
    min-height: 100%;
    position: relative;
}
#header {
    background: #ff0;
    padding: 10px;
}
#body {
    padding: 10px;
    padding-bottom: 60px;   /* Высота футера/
}
#footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 60px; / Высота футера */;
    background: #6cf;
}
</style>
<!--[if lt IE 7]>
<style type="text/css">
#container
{
    height: 100%;
}
</style>
<![endif]-->
</head>
<body>
<div id="container">
    <div id="header"><h1>Заголовок</h1></div>
    <div id="body"><h1>Контент</h1></div>
    <div id="footer"><h1>Подвал</h1></div>
</div>
</body>
</html>

Уже попробовал, теперь правило такое:
#foot{

margin: -35px auto 0; min-width: 1000px; height: 35px; background-color: green; position: relative; border-radius: 5px; clear: both; } — Angus123, Sep 22 '12 at 19:31

score 2 · Answer 3 · edited Oct 16 '12 at 13:28

2

Попробуйте для body поставить минимальную высоту 100%, а для футера отрицательный маржин равный высоте самого футера.

Ну и еще по теме с хабра: Прибитый к низу футер своими руками

edited Oct 16 '12 at 13:28

Deleted

371

answered Sep 22 '12 at 20:54

pustserg

750

Как приклеить подвал к низу экрана?

3 Answers3