Не удается заставить CSS Sticky нижний колонтитул работать. Что я делаю неправильно? - PullRequest
Новая
       23

Не удается заставить CSS Sticky нижний колонтитул работать. Что я делаю неправильно?

4 голосов
/ 02 октября 2008

Ну, это мой первый пост здесь, и я действительно наслаждаюсь сайтом.

У меня есть очень простой (безобразный, как грех) сайт, который я запустил, и по какой-то причине я не могу заставить нижний колонтитул CSS Sticky работать на FireFox. IE работает, но FF показывает его на полпути вверх по странице.

URL-адрес http://dev.aipoker.co.uk

Я знаю, что мне следует разрабатывать в FF и исправлять ошибки в IE, поэтому я полагаю, что я действительно допустил ошибку, и почему-то она работает в IE, но нигде больше.

Может кто-нибудь помочь избавить меня от моих страданий, пожалуйста?

Спасибо, ребята и девочки.

Ответы [ 4 ]

4 голосов
/ 02 октября 2008

У меня был успех с кодом, подобным этому: 

footer { 
  display: block; 
  position: absolute; 
  width: 100%; 
  bottom: 0px; 
}
3 голосов
/ 02 октября 2008

Попробуйте один , он хорошо работает в Firefox.

Кстати, вы должны слушать подкаст Boagworld, если вы этого еще не сделали. Это великолепно! :)

Приветствие.

1 голос
/ 04 апреля 2012

Это все, что вам нужно знать о css только липкие нижние колонтитулы и липкие переходы:

Придерживайтесь нижней части страницы 

Position: absolute;
top:auto;
bottom: 0;

Придерживайтесь нижней части экрана 

Position: fixed;
top:auto;
bottom:0;

Любые проблемы, возможно, это связано с тем, где вы разместили свой HTML-код (не делайте нижний колонтитул дочерним элементом, если он не привязан к оболочке содержимого), или с перекрытием CSS.

Вы можете применить ту же технику к липкой навигации, переключая авто и верх. Он совместим с различными браузерами (из памяти IE7 и выше), включая мобильные телефоны.

1 голос
/ 02 октября 2008

Минимальные изменения, которые я вижу, чтобы сделать это, будут:

  • перемещение нижнего колонтитула Внутри тела
  • установить абсолютное положение как для тела, так и для нижнего колонтитула. Секция
  • установить нижний = 0 пикселей на нижнем колонтитуле

, который заканчивается чем-то вроде этого в вашей голове: 

<style type="text/css">
  #body, #footerSection { position: absolute; }
  #footerSection { bottom: 0px; }
</style>

<div id="body">
   ...
   <div id="footerSection">
      ...
   </div>
</div>
...