Как прибить footer к низу если фон страницы с абсолютным позиционированием?

[foxer]

Добрый день.

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

Вот codepan: http://codepen.io/foxer1/pen/OXbYrj

 

[Джулия]

может,подойдёт такой вариант http://codepen.io/JuliJulia/pen/mEWWQa

[klierik]

А зачем тут абсолют? Ведь без него тоже самое можно сделать...

[foxer]

ну нужно было контент поверх фона положить, по другому не получилось, может подскажите как?

[foxer]

2 часа назад, Джулия сказал:

может,подойдёт такой вариант http://codepen.io/JuliJulia/pen/mEWWQa

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

[Джулия]

чуть что кидайте ссылку на проект - оценю,подкажу)

[Launder]

В 27.06.2016 в 10:01, foxer сказал:

в этой ситуации, когда на фоне у меня сочетание видео и картинки и им дано position: absolute

Где это в Вашем примере?

Вообще position: absolute располагается выше обычного контента по z-плоскости, может в этом дело?

Edited June 28, 2016 by Launder

[foxer]

9 минут назад, Launder сказал:

Где это в Вашем примере?

Вообще position: absolute располагается выше обычного контента по z-плоскости, может в этом дело?

Извиняюсь, пример менял немного.. Вот: 

http://codepen.io/foxer1/pen/EyWXbY

12 минуты назад, Джулия сказал:

чуть что кидайте ссылку на проект - оценю,подкажу)

Спасибо конечно)) но он на локалке пока, показать нет возможности

[Launder]

3 часа назад, Джулия сказал:

может,подойдёт такой вариант http://codepen.io/JuliJulia/pen/mEWWQa

Но ведь когда контента много, он наезжает на футер и содержимое накладывается друг на друга?

20 минут назад, foxer сказал:

пример менял немного

Вы хотите чтоб футер был резиновым или достаточна фиксированная высота подвала?

[foxer]

12 минуты назад, Launder сказал:

Но ведь когда контента много, он наезжает на футер и содержимое накладывается друг на друга?

Вы хотите чтоб футер был резиновым или достаточна фиксированная высота подвала?

он должен быть резиновым

Я конечно понимаю, что реализация фона через вставку img далеко не лучшая идея, тем более для адаптивного сайта, но реализовать это через background-image у меня так и не получилось, даже тему отдельную создавал для этого. Может так вообще не возможно сделать... Фишка в том, что видео и картинка должны совпадать пиксель в пиксель при различных размерах экрана, а если я вставляю нижнюю картинку бэкграундом, то на экранах меньше оригинальной ширины картинки и видео(1920) они ресайзятся не пропорционально т.к. для видео стоит object-fit: cover, что бы видео не сжималось, а обрезалось и центрировалось, а у картинки такого эффекта добиться не получается.

[Launder]

Резиновым, значит, подвал должен растягиваться контентом?

[foxer]

Вот и пришлось вставлять под видео тэг img, т.к. на него тоже можно повесить object-fit: cover, но тут начались проблемы с футером, да и когда на маленьких экранах контент перестраивается в длинную колонку и одной картинки уже не хватает.. В общем подкинул дизайнер задачку) 

1 минуту назад, Launder сказал:

Резиновым, значит, подвал должен растягиваться контентом?

ну да, меню в нем выстраивается в колонку на мобилках и он становится шире

[Launder]

Если я правильно понял задачу, то как-то так можно. Попробуйте увелечить/уменьшить контент - подвал всегда внизу. И он эластичный, растягивается контентом.

Edited June 28, 2016 by Launder

[foxer]

14 минуты назад, Launder сказал:

Если я правильно понял задачу, то как-то так можно. Попробуйте увелечить/уменьшить контент - подвал всегда внизу. И он эластичный, растягивается контентом.

Так то да, но как быть с нижней частью фона, если в вашем примере вниз поскролить, то прокручивается до конца фона, а подвал остается сверху. overflow: hidden на main не помогает....

[Launder]

Я просто не очень понимаю как Вам нужно.

[foxer]

15 часов назад, Launder сказал:

Я просто не очень понимаю как Вам нужно.

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

[Launder]

Подумаю... А что с Вашим видеофайлом? Что-то он не грузится ни в одном примере...

[foxer]

1 час назад, Launder сказал:

Подумаю... А что с Вашим видеофайлом? Что-то он не грузится ни в одном примере...

Наверно на cloudinary мэйл не подтвердил, сейчас должно работать. 

Буду ооочень признателен если поможете, всю голову сломал уже....