Задать вопрос

Как прижать футер при body height 100%?

Использую bootstrap для разметки и плагин jquery.mb.YTPlayer для полноэкранного видео в качестве background`а. https://github.com/pupunzi/jquery.mb.YTPlayer (плагин отвратительный в плане документации)

У body выставлен height 100%. Из за этого не удается прижать футер к низу.
R22DDcl.png
Как только убираю свойство - футер внизу, но видео вылазит за "вьюпорт".
VVnEBcK.png
Как бы так оставить видео в своих рамках и подвинуть футтер?

Я понимаю что это не место для "вот вам сайт -сделайте". Но я правда не знаю как описать всю проблему, поэтому дам ссылку: https://caspergold.ru/
Все свои попытки прижать футтер я убрал для чистоты вопроса.

Спасибо.
  • Вопрос задан
  • 2740 просмотров
Подписаться 2 Оценить Комментировать
Решения вопроса 1
Assada
@Assada Автор вопроса
Кое как решилось. Но ОЧЕНЬ криво.
html {
    position: relative;
    height: 100%;
}

body {
    position: relative;
    min-height: 100%;
    margin-bottom: 100px;
}

footer {
    position: absolute;
    /*bottom: 0;*/
    width: 100%;
    height: 100px;

}


function setHeiHeight() {
                $('.video-section, .pattern-overlay').css({
                    'min-height': $(window).height() + 'px'
                });
            }
            setHeiHeight();$(window).resize(setHeiHeight);
Ответ написан
Пригласить эксперта
Ответы на вопрос 4
kindofbear
@kindofbear
Веб-разработчик
getbootstrap.com/examples/sticky-footer

Изучали? Довольно простой вариант
Ответ написан
tenoclock
@tenoclock
Python/Django программист
Стоит выставить не height: 100%, а min-height: 100%

а у футера можно затем сделать:
position: relative;
top: -20px;
Ответ написан
@BelkinVadim
Frontend разработчик
html {
  position: relative;
  height: 100%;
}

body {
  position: relative;
  min-height: 100%;
}

Не задавайте body высоту, задавайте минимальную высоту в 100%. При 100% body принимает высоту экрана. При содержимом превышающим этот размер body остаётся 100% от высоты экрана и не растягивается, тем самым футер приклеен к нижней точке и наслаивается на контент. Футер через position: absolute размещаете внизу и растягиваете на 100%. Как в приведенном выше примере для bootstrap
Ответ написан
Alexufo
@Alexufo
противоречивый, сложный, весь компьютерный.
диву классом "pattern-overlay", оборачивающим контейнер "container" добавить overflow:auto
Либо див добавить <div class="clearfix visible-xs-block"></div> в див "pattern-overlay"
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы