Не получается прижать footer к низу страницы

Artur Boss · August 31, 2012

Друзья, пробовал несколько методов, найденных в сети, выбрал тот, при котором к footer-у применяется абсолютное позиционирование, а страница body и html растягиваются до 100%...

Долго мучился, так и не разобрался, вот полный код:


<!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 charset="utf-8">

<style type="text/css">
html { height: 100% }
* html body { height: 100% }

body {
margin: 0; 
padding: 0;
min-height: 100%;
position: relative;
}

#header {
  float:left;
  width:100%;
  min-width:1000px;
}

#wrapper {
  width:100%;
  min-width:1000px;
  height:100%;
  min-height:100%;
  overflow: hidden;
  position: relative;
}

#container {
  width:1000px;
  min-width:900px;
  height:100%;
  min-height:100%;
  margin:0 auto;
  overflow: hidden;
  position: relative;
}

#footer {
  float:left;
  width:100%;
  height:80px;
  margin-top: 50px;
  min-width:1000px;
  position: absolute;
}
</style>
</head>

<body>

<div id="header">шапка</div>

  <div id="wrapper">
   <div id="container">
    контент
   </div>
  </div>

<div id="footer">подвал</div>

</body>
</html>

Помогите кто может решить такую мелочь...

Проблему решил, добавив height:100% к body, но вылезла новая...

footer уходит вниз за пределы экрана и появляется полоса вертикальной прокрутки (( как это решить?

Edited August 31, 2012 by Artur Boss

Artur Boss · August 31, 2012

footer уходит вниз за пределы экрана и появляется полоса вертикальной прокрутки (( как это решить?

я так понимаю это связано с wrapper и container, но если убрать у них значения height 100%, то футер опять же лезит наверх

Edited August 31, 2012 by Artur Boss

Sign In

Не получается прижать footer к низу страницы

Question

Artur Boss

Link to comment

Share on other sites

1 answer to this question

Recommended Posts

Artur Boss

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information