Сайт без вертикальной прокрутки, адаптивный, футер прижат книзу

[sejunctus]

Очень нужна помощь опытных верстальщиков. Визуально ТЗ на картинке.
Требования следующие:
1) футер прижат книзу
2) фоновый слайдер-карусель (выглядит именно так, по бокам предыдущая и следующая фотографии чуть затемненные)
3) полностью адаптивный, другими словами не должно быть ни горизонтальной, ни вертикальной прокрутки при любых разрешениях экрана
4) контент расположен в блоке поверх карусели
5) все это должно работать на CMS Joomla

Я уже чего только не пробовал. Универсального решения не нашел. Фиксишь футер, остается пространство между каруселью и футером.
Подгонять по высоте и прописывать стили для всех типов разрешений... Вряд ли оптимальный способ.
На ум приходит использовать карусель, чтобы картинки были фоновыми и использовать background-size: cover, но вот не придумал как это осуществить.
Высоту хедера и футера можно зафиксить (100 пкс)

В общем, очень надеюсь на помощь.
Думаю, данная задачка будет интересна многим. Вряд ли такие сайты попадаются на каждом шагу. (хотя, может есть примеры?)

[Switch74]

https://jsfiddle.net/cmzn284v/

в .middle запихиваете карусельку и все

[Igor Schnaider]

Погуглите holy grail layout

[Mary_RND]

Такой пример подходит?

http://www.giulianovars.ru/

[sejunctus]

3 минуты назад, Mary_RND сказал:

Такой пример подходит?

http://www.giulianovars.ru/

Не совсем. Есть прокрутка вертикальная. А в ТЗ сказано - никаких прокруток при любых разрешениях.

Попробовал погуглить разметку "святой грааль" (holy grail layout). Понравился вариант https://htmlacademy.ru/blog/29

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

[Mary_RND]

черт, забыла про вертикаль

[Switch74]

судя по всему вам тупо карусельку нужно по размерам окна браузера

[sejunctus]

24 минуты назад, Switch74 сказал:

судя по всему вам тупо карусельку нужно по размерам окна браузера

В том то и дело, что не просто "тупо карусельку".  Футер должен быть прижат книзу.
Прижимаем футер - при уменьшии окна браузера появляется зазор между каруселькой и самим футером.
А нужно, что это все вместе красиво адаптировалось. Знаете, как в случае с background-size: cover, когда уменьшаешь окно, и фон уменьшается пропорционально.

[kattiperk]

А что насчет height: 100vh? Футер же не абсолютный, из потока не выпал, то вся высота 100vh для слайдера будет занимать от хедера до футера. Или нет. Тогда margin'ами можно отделиться от верха и низа. В общем, попробуйте. Также не забывайте про flexbox, там может найтись решение.

 

[sejunctus]

8 часов назад, Switch74 сказал:

https://jsfiddle.net/cmzn284v/

в .middle запихиваете карусельку и все

Вот что получается (разрешение - 1920*1200 пкс).
Нужно избавиться от белого зазора между каруселью и футером. Если растянуть картинки по высоте до 100% и ширину поставить auto, то пропадает футер.

5 часов назад, kattiperk сказал:

А что насчет height: 100vh? Футер же не абсолютный, из потока не выпал, то вся высота 100vh для слайдера будет занимать от хедера до футера. Или нет. Тогда margin'ами можно отделиться от верха и низа. В общем, попробуйте. Также не забывайте про flexbox, там может найтись решение.

 

Про 100vh не очень понял, что вы имеете в виду. Скрипт или calc()?
Flexbox не совсем кроссбраузерно получится.

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

По идее, должен же быть более красивый способ

[Switch74]

каким образом футер исчезает, если картинкам поставить 100% высоты?

https://jsfiddle.net/cmzn284v/1/

[sejunctus]

12 часа назад, Switch74 сказал:

каким образом футер исчезает, если картинкам поставить 100% высоты?

https://jsfiddle.net/cmzn284v/1/

Спасибо! Вроде получилось: http://steiner-glass.tmweb.ru/01/

Но теперь другая загвоздка: нужно центральное изображение сделать шире 2 других, а их напротив, ужать по бокам.
Карусель owl-carousel. Может, есть какой-нибудь способ? Через css криво как-то выходит...

[Switch74]

не пойму почему у вас 4 active ставится, мне казалось нужно всего 3

у вас есть классы для центрального .active.center увеличиваете ширину, для всех остальных уменьшаете

[sejunctus]

42 минуты назад, Switch74 сказал:

не пойму почему у вас 4 active ставится, мне казалось нужно всего 3

у вас есть классы для центрального .active.center увеличиваете ширину, для всех остальных уменьшаете

Странно, вроде там 3 active стоит.

Проблема как раз в том, что непонятно, какие размеры прописывать у боковых картинок.
Вот смотрите: при разрешении в 1920 пкс скрипт делит всю ширину поровну между слайдами и всем прописывает 512 пкс.
При разрешении в 1920 мне нужно центральный слайд сделать шириной 1170 пкс. Что прописать у боковушек?
Прописывать нужно конкретную ширину, дабы перебить inline стиль.
В идеале было бы найти в скрипте функцию, которая делит ширину экрана поровну между всеми слайдами.
Но скрипт огромный, с кучей функций, а я в js не очень силен.

[sejunctus]

Пропишем у боковушек при ширине 1920 пкс ширину 375пкс [ ( 1920-1170 ) / 2 ].
Но если мы начнем увеличивать ширину экрана, то соседние картинки начнут наезжать на эти.

[Switch74]

в идеале не стоит использовать сторонние скрипты, чтобы потом их переписывать

левый и правый блоки можно указывать в px или в %, например если вы им выделите по 20%, то центральному останется 60%
display:inline-block нужен будет и желательно сделать для этих блоков overflow:hidden;
я бы картинки вставлял через img, а не background и выравнивал по центру этих блоков

[sejunctus]

3 минуты назад, Switch74 сказал:

в идеале не стоит использовать сторонние скрипты, чтобы потом их переписывать

левый и правый блоки можно указывать в px или в %, например если вы им выделите по 20%, то центральному останется 60%
display:inline-block нужен будет и желательно сделать для этих блоков overflow:hidden;
я бы картинки вставлял через img, а не background и выравнивал по центру этих блоков

Проценты не годятся, т.к. ширина берется от родительского блока, а в карусели он - это сумма всех изображений.
7680 пкс - 20% это 1536 пкс.
Картинки через background, чтобы использовать свойство background-size: cover, в противном случае блок будет подстраиваться по высоте либо, что еще хуже, изображения будут вытягиваться (у нас же height: 100%).
Может, вы знаете скрипт карусели попроще? Без таких наворотов?

[Switch74]

значит придется делать в px

 

[Cerberus]

42 минуты назад, sejunctus сказал:

Может, вы знаете скрипт карусели попроще? Без таких наворотов?

А что если элементы карусели сделать списком?

<ul class="carusel">
  <li></li>
  <li class="active"></li>
  <li></li>
</ul>

тот элемент, который с классом active делать по ширине 60% (ну или в px), а два других делать узкими. Элементам <li> можно поставить через background-image.

 

[Switch74]

можно и так

[sejunctus]

Кажется, теперь то, что нужно!

Спасибо огромное за помощь!