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

Question

[Алексей]

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

У body выставлен height 100%. Из за этого не удается прижать футер к низу.

Как только убираю свойство - футер внизу, но видео вылазит за "вьюпорт".

Как бы так оставить видео в своих рамках и подвинуть футтер?

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

Спасибо.

Answer 1

[Алексей]

Кое как решилось. Но ОЧЕНЬ криво.

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);

Comments

[Евгений]

В хтмл кривой значит нормально )))

Answer 2

[Алексей Рахе]

getbootstrap.com/examples/sticky-footer

Изучали? Довольно простой вариант

Comments

[Алексей]

Изучал. Данный метод работает но не совсем верно (в отдельном случае)

[Алексей Рахе]

А почему не сделать врапперу с видео position: fixed ?

Answer 3

[Роман Королев]

Стоит выставить не height: 100%, а min-height: 100%

а у футера можно затем сделать:
position: relative;
top: -20px;

Comments

[Алексей]

Сам футер то это поможет подвинуть, но тогда видео "заезжает" за "вьюпорт". Скриншот: i.imgur.com/t2kwiBn.png
Линией показан вьюпорт. А должно быть так: i.imgur.com/lVWgWva.png

Answer 4

[Вадим Белкин]

html {
  position: relative;
  height: 100%;
}

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

Не задавайте body высоту, задавайте минимальную высоту в 100%. При 100% body принимает высоту экрана. При содержимом превышающим этот размер body остаётся 100% от высоты экрана и не растягивается, тем самым футер приклеен к нижней точке и наслаивается на контент. Футер через position: absolute размещаете внизу и растягиваете на 100%. Как в приведенном выше примере для bootstrap

Comments

[Алексей]

Хм. Поменял - ничего не изменилось. Но мне кажется это верное направление.

[Алексей]

Это кое как помогает. Но возникает проблема в размерах фонового видео. Оно должно быть высотой экрана.

[Вадим Белкин]

Тогда одного min-height: 100%; для body мало, нужно 100% высоту делать. Но опять проблемы с фиксацией футера могут быть. Придется к jQuery обратится за выставлением высоты либо для body либо для контейнера с видео.

Answer 5

[Александр Борисович]

диву классом "pattern-overlay", оборачивающим контейнер "container" добавить overflow:auto
Либо див добавить <div class="clearfix visible-xs-block"></div> в див "pattern-overlay"

Comments

[Алексей]

overflow:auto это что то от лукавого =)
а вот clearfix visible-xs-block не помог мне. Хотя есть подозрения что я не так что-то делал

[Александр Борисович]

Алексей: Этот блок должен тянуться по высоте вложенных дивов. Он этого не делает.
data3.floomby.com/files/share/29_1_2015/23/128ElU2...
чтобы он прижимал футер ему нужно добавить overflow:auto

[Алексей]

Это свойство делает футер что то вроде как свойство position: fixed;

[Александр Борисович]

Алексей: это свойство заставляет родителя тянуться по высоте вложенных элементов и футер никуда не едет.