Как держать нижний колонтитул всегда внизу при изменении размера контента с разными разрешениями [дубликаты]

Question

Как держать нижний колонтитул всегда внизу при изменении размера контента с разными разрешениями [дубликаты]

0

Я сделал сайт для своего друга. Вы можете увидеть это здесь.

Дело в том, что я хочу, чтобы нижняя часть страницы находилась на самом дне сайта. И изображения изменяются с другой резолюцией.

Пример:

Наблюдая сайт на разрешении 1366x768 страница всегда в виде, как здесь:

Но когда я перейти на более высоком разрешении, с большей высотой (1280x1024), похоже, это

Как вы можете видеть, между нижней частью страницы и нижней частью сайта есть много места. Я хочу, чтобы он оставался таким же, как разрешение 1366x768, всегда "полноэкранное" изображение увеличивалось на более высокой высоте, а "нижний колонтитул" всегда находился в нижней части страницы. Как динамическая полноэкранная страница.

Надеюсь, вы можете мне помочь, я думал о медиа-запросах, но я не уверен, что это лучшее решение, и если да, то как было бы лучше всего их запросить.

Спасибо за ваше время, я ценю вашу помощь!

Evolis 13 апр. 2014, в 16:28

Источник

0

Спасибо, посмотрю на этого Стива!
Evolis 13 апр. 2014, в 14:19

Теги:

html

css

responsive-design

1 ответ

Ещё вопросы

Спасибо, посмотрю на этого Стива!

Simon Hänisch · Accepted Answer · 2014-04-13T13-10-00.000Z

Я не думаю, что это хорошая практика, чтобы зафиксировать нижний колонтитул снизу, потому что он будет скрывать контент, а в худшем случае не будет места для какого-либо контента, если высота окна меньше, чем высота nav + высота нижнего колонтитула.

В этом случае, если вы действительно хотите переместить нижний колонтитул снизу, я предпочел бы использовать некоторый javascript для добавления дополнения к содержимому (ползунок в этом случае), если высота окна больше, чем высота вашего сайта:

var windowHeight  = window.innerHeight;
var websiteHeight = parseInt(window.getComputedStyle(document.body).height);

if (windowHeight > websiteHeight) {
    var diff = windowHeight - websiteHeight;
    document.getElementById('slider').style.paddingBottom = diff+'px';
}

Поместите это внутри функции и вызовите ее в режиме onload. Обратите внимание: если вы наведете курсор на башмак, высота содержимого увеличится и переместит нижний колонтитул вниз. Вот почему в отзывчивом дизайне вы обычно не исправляете вещи по вертикали, а вместо этого позволяете высоте содержимого быть гибкой переменной...

Другим подходом было бы свойство мини-высоты CSS для содержимого, чтобы он занимал минимальную величину высоты браузера.