Липкий нижний колонтитул, чем не относится ко всем страницам - PullRequest
0 голосов
/ 19 декабря 2009

В настоящее время я работаю над сайтом, которому нужен своего рода липкий нижний колонтитул, но не везде.

Итак, http://www.hostcule.org/newsite/

Для домашней страницы нижний колонтитул автоматически прилипает к нижней части, но для других страниц это не так, как http://www.hostcule.org/newsite/about-us

Как мне, используя CSS, заставить его придерживаться дна?

Текущий CSS для нижнего колонтитула div

#footer{
    clear:both;
    float:left;
    width:100%;
    border-top:solid 1px #d1d0d0;
    background-color:#f1efef;
    margin-bottom:-10px;
}

1 Ответ

0 голосов
/ 19 декабря 2009

Лучшее, что я когда-либо смог сделать, это сдвинуть нижний колонтитул с нижней части страницы, чтобы он всегда был с нижней части экрана. Ниже приведен пример того, как это сделать. Разделение stickyfooterfail не работает, и я не знаю почему, но свойство bottom работает правильно, если вы изменили position на абсолютное значение.

<html>
  <head>
    <style type='text/css'>
body {
height: 100%;
}

#fullheight {
background:#ff0;
position: relative;
min-height: 100%;
}
#stickyfooterfail {
position: relative;
bottom: 0px;
}

#stickyfooter {
background: #f0f;
}
    </style>
  </head>
  <body>
    <div id='fullheight'>
      Some text<br>
      Some text<br>

      Some text<br>
      <div id='stickyfooterfail'>
        Should be at the bottom but isn't
      </div>
    </div>
    <div id='stickyfooter'>
        This is pushed off the bottom by the min-height attribute of #fullheight
    </div>
  </body>
</html>

Если вы знаете, что нижний колонтитул будет иметь постоянный абсолютный размер, тогда вы можете установить padding-bottom в - (высота), например, -40px, если он был 40px, а затем установить bottom из #stickyfooterfail в то же значение .

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...