Верстка с прилипающим к низу подвалом, футером (footer)

При ниобходимости сделать верстку с прилипающим футером, можно использовать следующий шаблон:

HTML:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Футер прилипалка</title>
</head>

<body>
  <div id="header">ШАПКА</div>
  <div id="wrapper">ВАТНИК</div>
  <div id="footer">ВАЛЕНКИ</div>
</body>
</html>

CSS:

 *{
  margin:0;
  padding:0;
}
html{
  height:100%;
}
body{
  position:relative;
  min-height:100%;
}
#header {
    background-color:#4bb648;
}
#wrapper{
  padding-bottom:50px;
  background-color:#fcd209;
  display:table;
}
#footer{
  position:absolute;
  bottom:0;
  left:0;
  z-index:500;
  width:100%;
  height:50px;
  overflow:hidden;
  background-color:#e6413a;
}

Пример можно посмотреть тут

Назад к списку

Комментарии

Загрузка комментариев...