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

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

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

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

Источник

10 ответов

Решение

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

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

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

Источник

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 так что это не накладывается на ваш контент.

Работает практически во всех браузерах, которые я тестировал.

Источник

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

Источник

Установите высоту html и body на 100%, вставьте контейнерный контейнер с минимальной высотой 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>
Источник

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

Источник

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

Источник

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

Источник

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

Источник

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

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

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

Источник

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

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

Источник
Другие вопросы по тегам