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

StackOverflow https://stackoverflow.com/questions/159487

  •  03-07-2019
  •  | 
  •  

Вопрос

Что ж, это мой первый пост здесь, и мне очень нравится этот сайт.

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

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

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

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

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

Это было полезно?

Решение

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

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

Ваше здоровье.

Другие советы

Я добился успеха с таким кодом:

footer { 
  display: block; 
  position: absolute; 
  width: 100%; 
  bottom: 0px; 
}

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

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

в результате у вас в голове возникает что-то вроде этого:

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

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

Это Все, что тебе нужно знать о CSS только липкие нижние колонтитулы и липкая навигация:

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

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

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

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

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

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

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top