Нижний колонтитул — в нижней части страницы

Кросс-браузерный метод, реализующий 100% высоту страницы с помещением нижнего колонтитула в нижнюю часть экрана

С каждым годом мониторы становятся всё больше и больше; как следствие, растёт и разрешение экрана. И страницы с небольшим количеством контента на таких мониторах смотрятся некрасиво — особенно, когда нижний колонтитул (aka подвал aka footer) плавает где-то в верхней части экрана Многие сайты решают эту проблему при помощи табличной верстки (<table height="100%">) с теми или иными вариациями. [...]

← Вернуться к полной версии записи «Нижний колонтитул — в нижней части страницы»…

Вложения:

Автор: ; опубликовано в: CSS; метки: CSS, HTML, WAI, WCAG, XHTML, макет, разметка, футер
12
Мар
2008

RSS Комментарии к статье «Нижний колонтитул — в нижней части страницы» (24)  »

  1. Denver

    также скажите или дайте линку, как поступить в этой ситуации для табличного способа

  2. * применяется к любому селектору.
    Знак > означает, что, например, в записи a > b, b должен быть непосредственным потомком a.

    Я бы порекомендовал к прочтению следующие статьи:

  3. tolich

    Отлично!
    А как сделать что бы в первом примере (зеленый) растягивался на всю высоту страницы, до footer’а?

    • Посмотреть пример 2 :)

      Если Вы уберёте лишний текст во втором примере, то получите то, что хотите от первого.

      • tolich

        Визуально да. Но я имею ввиду растянуть именно #content между #header и #footer. Содержимое #content будет подгружаться динамически и надо чтобы #content не зависел от его высоты.

        • Во втором примере всё так и есть. Либо я неправильно понимаю, что Вы хотите.

          • tolich

            В примере высота #content зависит от текста который у него внутри. Это видно когда текста меньше, чем высота окна браузера.

          • А Вам нужно, чтобы футер всегда был прикреплен к нижней границе окна?

  4. tolich

    Владимир, прошу обратить внимание – ключевое слово #content. Хидер и футер размещены отлично. Единственное, что мне хочется – когда размер данных в #content такой, что высота #content меньше размера браузера, то #content должен растягиваться от хидера до футера. Тоесть, в Вашем 1-ом примере, зеленый растянуть до футера, а не перекрасить красный в зеленый. :)

  5. eaden

    Ваван! Как же трудно было найти статью по этому вопросу! Все мега-гении интернета только какую-то нереальную демагогию врубают и все. А я ищу готовый рецепт, а не какую-то философию css. А тут – все ясно: контейнер(хедер-контент-футер). Я вставил в свой код, и – бах! Все работает. Обычно мне лень писать благодарности. Но не в этот раз. Спасибо!
    Что этот чувак (tolich) от тебя хочет? Он, наверное сам и не понял)))). Наверное выкладывает нереальную демагогию на эту тему. На досуге. «Ключевое слово»! Наверное нереально умный чел))).
    P.S.: Все подумают, что ты сам себе написал:)
    P.P.S.:Спасибо!

  6. eaden

    Как же трудно было найти статью по этому вопросу! Все мега-гении интернета только какую-то нереальную демагогию врубают и все. А я ищу готовый рецепт, а не какую-то философию css. А тут – все ясно: контейнер(хедер-контент-футер). Я вставил в свой код, и – бах! Все работает. Обычно мне лень писать благодарности. Но не в этот раз. Спасибо!

    (На случай, если первое сообщение не пройдет модерацию)

  7. Александр

    Если превратить id=”container” в class=”container” для многократного использования, то последующие блоки “container” перестают растягиваться на всю высоту окна, растягиваются только в зависимости от количества контента.

  8. Триас

    Чел, который Tolich, видимо имел ввиду, что при небольшом содержании (или его отсутствии вообще) блока #content, этот самый блок все равно имеет высоту от header до прижатого к низу footer. А при увеличении содержания, когда оно заполнит визуально блок #content, этот самый блок будет тянуться в высоту, при этом появится полоса прокрутки страницы, а footer будет смещаться за пределы экрана (оставаясь прибитым к нижней границе экрана). Это видимо нужно для размещения бэкграунда в этом блоке снизу, или какого-то повторяемого..

    Мне тоже нужен ответ на такой вопрос, но я еще остальные заметки не прочитал :)

    • Даниил

      Я тоже не могу найти ответ на этему про контент, который занимает положение между хедером и футером!
      2011 надеюсь кто-нибуль нашел ответ на этот вопрос! )

Пожалуйста, не используйте эту форму для комментирования! Данная форма предназначена исключительно для ботов.

Оставить комментарий к записи «Нижний колонтитул — в нижней части страницы»

Ваш e-mail не будет опубликован. Обязательные поля помечены *

*

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Оставляя комментарий, вы выражаете своё согласие с Правилами комментирования.

Подписаться, не комментируя

गते गते पारगते पारसंगते बोधि स्वाहा