CSS нижний колонтитул придерживаться нижней части браузера? - PullRequest
Новая
       40

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

9 голосов
/ 03 апреля 2010

У меня проблема с моим сайтом http://artygirl.co.uk/pixie/about/ Кажется, я не могу заставить нижний колонтитул автоматически придерживаться нижней части браузера и показывать остальную часть моего фона. Есть ли решение лучше, чем использование позиции: фиксированная или абсолютная?

Я думаю, что, возможно, есть другие стили, которые не соответствуют некоторым тестам, которые я выполняю в firebug.

Спасибо за вашу помощь С уважением Джуди

Ответы [ 10 ]

37 голосов
/ 13 декабря 2011

CSS 

.podbar {
    bottom:0;
    position:fixed;
    z-index:150;
    _position:absolute;
    _top:expression(eval(document.documentElement.scrollTop+
        (document.documentElement.clientHeight-this.offsetHeight)));
    height:35px;
}

HTML 

<div class="podbar">
    Put your footer here
</div>

Это создаст наклейку, которая всегда будет отображаться внизу страницы и наложит все. Просто добавьте дополнительные поля / отступы в нижней части div основного контейнера, равного высоте нижнего колонтитула +5px, чтобы он не перекрывал ваш контент.

Работает практически во всех протестированных мною браузерах.

8 голосов
/ 03 апреля 2010

Я уже использовал технику, описанную в этой статье: Макет CSS: высота 100% с верхним и нижним колонтитулами . Это требует некоторой дополнительной разметки в вашем HTML.

4 голосов
/ 03 апреля 2010

Это всегда немного сложно, вы можете увеличить min-height своей области контента, но даже тогда, если у кого-то действительно большой экран, вы увидите то же самое.

Вы можете использовать немного JavaScript, чтобы увеличить min-height, если у кого-то есть огромный видовой экран, но он все еще не элегантен. Я не уверен, что есть решение только для CSS.

Если вы хотите попробовать приведенный выше код, который я только что разместил здесь: По-прежнему сложно обнаружить присутствие полосы прокрутки с помощью jQuery? может быть вам полезно.

3 голосов
/ 03 апреля 2010

Установите высоту html и body на 100%, вставьте div контейнера с минимальной высотой 100% и относительной позицией, и вложите нижний колонтитул в положение: absolute, bottom: 0; 

/* css */
html, body {
    height: 100%;
}

#container {
    min-height: 100%;
    position: relative;
}

#footer {
    position: absolute;
    bottom: 0;
}


<!-- html -->
<html>
<head></head>

<body>
  <div id="container">
    <div id="footer"></div>
  </div>
</body>
</html>
2 голосов
/ 10 июля 2012

Здесь у вас есть пример и объяснение http://ryanfait.com/sticky-footer/

0 голосов
/ 22 сентября 2015

Не использовать позиция: абсолютная использовать позиция: вместо . 

.footer {
   z-index:99;
   position:relative;
   left:0;
   right:0;
   bottom:0;
}

position: absolute прикрепит его к нижней части экрана, в то время как относительное положение не будет игнорировать другие элементы div, поэтому оно останется в нижней части полной страницы.

0 голосов
/ 06 июня 2012

Если вы используете библиотеку Compass для Sass , есть и другая опция. Вы можете использовать компас mixin ( demo ). Требуется, чтобы нижний колонтитул был фиксированной высоты и чтобы ваш HTML имел определенную общую структуру.

0 голосов
/ 03 апреля 2010

Я всегда предпочитаю нижние колонтитулы из-за разного содержания на страницах. Я использую верхний край 5em для своих нижних колонтитулов. Чаще всего мы знаем высоту содержимого, которое может появляться на страницах.

0 голосов
/ 03 апреля 2010

Я понял это. Html имел свойство css для фона, говоря белый цвет.

0 голосов
/ 03 апреля 2010

Вы можете установить min-height на #content. Это не будет фиксировать нижний колонтитул в нижней части браузера, но гарантирует, что вы всегда можете увидеть определенное количество фона.

В качестве альтернативы, используя JavaScript, вы можете определить высоту окна браузера, а затем вычислить min-height для #content и применить его с помощью JavaScript. Это гарантирует, что нижний колонтитул всегда находится в правильном месте.

...