Заставить ДВЕ нижние колонтитулы в нижней части страницы

0

На сайте, над которым я сейчас работаю, есть интересный макет, с которым мне сложно справляться с CSS. Верхний и нижний колонтитулы охватывают всю ширину окна браузера с содержимым, ограниченным блоком шириной 960 пикселей, однако в этом блоке содержимого 960px имеется вторичный "внутренний" нижний колонтитул. Как нижний колонтитул, так и этот "внутренний" нижний колонтитул должны быть внизу страницы. Здесь разметка веб-сайта, разделенная на функциональные блоки:

<html>
    <body>
        <header></header>
        <section id="content">
            MAIN CONTENT
            <section id="internal-footer"></section>
        </section>
        <footer></footer>
    </body>
</html>

CSS выглядит следующим образом:

html{margin:0;padding:0;min-height:100%;height:100%;}
body{margin:0;padding:0;min-height:100%;position:relative;}
header{width:100%;}
footer{width:100%;height:XXXpx;position:absolute;bottom:0;left:0;}
#content{width:960px;margin:0 auto;position:relative;padding-bottom:(XXX+YYY)px;}
#internal-footer{width:100%;height:YYYpx;position:absolute;bottom:0;left:0;padding-bottom:XXXpx;}

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

Когда имеется достаточный контент, все работает по назначению. Когда содержимого недостаточно, секция #content не растягивается, а внутренний нижний колонтитул не только поднимается, но из-за нижнего заполнения слишком высокий. Конечно, слишком высокий уровень не является серьезной проблемой, поскольку я могу просто не устанавливать no-repeat на фоновом изображении, и никто не мудрее.

Итак, как я могу заставить #content растягиваться до нижней части страницы, не создавая полосу прокрутки, когда содержимого недостаточно?

  • 0
    Является ли использование JQuery вариант?
  • 0
    Технически да, но я хотел бы избежать JavaScript, если это можно сделать без него
Теги:
css-position
footer

3 ответа

1
Лучший ответ

Изменение HTML и CSS, как показано ниже, помогает вам достичь того, чего вы хотите? Теперь внутренний нижний колонтитул находится внутри нижнего колонтитула, а также центрирован.

<footer>
        <section id="internal-footer"></section>
</footer>



#internal-footer{width:300px;padding-bottom:50px!important;background-color:#990;height:50px;margin:-50px auto 0 auto;}

Я копирую ваш комментарий с рабочего скрипача, чтобы люди могли легко найти решение

Я решил вторую проблему - перемещение содержимого нижнего колонтитула. Сначала мне пришлось удалить отрицательное нижнее поле на внутреннем нижнем колонтитуле (margin: -137px auto 0 auto), тогда мне пришлось добавить маржу к авторскому праву p, равному дополнению нижнего колонтитула. Обновите свой ответ, чтобы включить исправления, и я могу его принять. Здесь финальный, рабочий, скрипка: jsfiddle.net/M72fn

Поделиться
  • 0
    Это почти сработало! Проблема заключалась в том, что внутренний нижний колонтитул появился «внутри» нижнего колонтитула (перекрывая его), а не над ним, в области содержимого. Я решил эту margin:-50px auto изменив ваши поля на: margin:-50px auto и удалив padding-bottom . Я думаю, что это работает, но я проверю это на главном сайте.
  • 0
    хорошо, дайте мне знать: P
Показать ещё 6 комментариев
0

Ваша область содержимого должна быть на 100% от доступной высоты. Это можно сделать, #content header абсолютно (как у вас есть нижний колонтитул), а затем сделав #content 100% высоким с заполнением, чтобы можно было использовать верхний и нижний колонтитулы:

header {width:100%;position:absolute;top:0;left:0;...}
#content {display:block; min-height:100%; padding:50px 0 100px 0; ...}

http://jsfiddle.net/Ds5tX/3/

Поделиться
  • 0
    Не работает, когда содержание превышает 100% высоты: jsfiddle.net/EJcJ9
  • 0
    @stevendesu. Вы правы. Ваше решение иметь один нижний колонтитул, который выглядит как 2, вероятно, будет правильным решением.
0

Я боюсь, что вы должны использовать javascript. Вот как я сделал бы это с jquery:

$(document).ready(function(){
    if(($(window).height()-100)>$('#content').height()){
        $('#content').height($(window).height()-200);
    }
});

и скрипка здесь

Поделиться
  • 0
    Вам нужно будет добавить слушателя изменения размера, чтобы это было разумным решением. Кроме того, запрошенный макет выполним без необходимости сценариев.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню