Нижний колонтитул в нижней части макета жидкости - PullRequest
Новая
       33

Нижний колонтитул в нижней части макета жидкости

9 голосов
/ 10 марта 2012

У меня изменчивый макет, но, как следствие, когда на странице недостаточно содержимого, мой нижний колонтитул продолжает двигаться вверх, как в в этом примере .

enter image description here

Популярное решение для удержания нижнего колонтитула в нижней части страницы использует position: fixed или position: absolute, однако, когда я это делаю, контент может столкнуться снижний колонтитул при изменении размера (вы можете видеть, что я имею в виду здесь . Попробуйте изменить размер окна до точки, в которой текст скрывается за нижним колонтитулом).

enter image description here

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

Спасибо!

Ответы [ 4 ]

2 голосов
/ 10 марта 2012

Есть способ CSS сделать это.Или, по крайней мере, есть один, который работает для всех браузеров, которые я поддерживаю (обратно в IE7).

Я использую отрицательный трюк с полем сверху, чтобы прикрепить нижний колонтитул к нижней части страницы.Этот DIV оборачивается вокруг всего содержимого страницы, а не только заголовка, что достаточно для большинства людей.Допустим, у DIV есть класс «все, кроме самого».Затем я заставляю страницу быть как минимум высотой окна.Полная версия, которая работает в большинстве браузеров: 

html, body, .everything-but-the-footer {
    height: 100%;
}

.everything-but-the-footer {
    margin-top: -21px; // footer height + border * -1
    min-height: 100%
}

.footer {
    height: 20px;
    border-top-width: 1px;
}

.header {
    padding-top: 21px; // footer height + border
}

Обратите внимание, что техника JSFiddle, указанная в комментариях, вообще не работает в IE и в Chrome не решает указанную проблему (перекрытие нижнего колонтитула и содержимого).

1 голос
/ 10 марта 2012

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

Попробуйте и посмотрите, ищите ли вы что-то похожее

http://jsfiddle.net/blackpla9ue/wCM7v/1/

Это означает, что если область содержимого меньше, чем ваш видовой экран, он помещает нижний колонтитул в нижнюю часть области просмотра , а если он больше, чем область просмотра, он остается в нижней части содержание как и положено.Событие добавляется в событие изменения размера, поэтому даже после изменения размера браузера оно будет позиционироваться соответствующим образом.

0 голосов
/ 10 марта 2012

Я мог бы сделать что-то вроде этого ... с небольшим jQuery. 

var a = $('#floatdiv').height(); //get the height of the content
var b = $(window).height();      //get the height of the window
var c = $('footer').height();    //get the height of the footer
var d = b - c;                   //subtract the footer height from window height

if(a < b){                       //if the content is smaller than the window 
    $('#floatdiv').css('height', d + 'px');  //set the content height to the    
}                                            //window minus the footer

Пример: http://jsfiddle.net/tM445/6/

0 голосов
/ 10 марта 2012

Для этого вы можете использовать липкий нижний колонтитул метод для этого.

Проверьте это: http://jsfiddle.net/tM445/5/

...