Как сделать, чтобы контент «наезжал» на footer?

Question

[Krasnorepov]

Долго думал как правильно сформулировать вопрос и понял, что без примера тут не обойтись.

На сайте elementaryos.org контент как бы наезжает на footer. Как сделать также?

Спасибо.

Comments

[Krasnorepov]

Я имею ввиду «нахлёст» при вертикальном скроллинге. Футер выезжает из-под блока с контентом.

Answer 1

[Иван Желудков]

Вот так это делается.

Comments

[Krasnorepov]

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

[romaromk]

а если контент меньше высоты 1600, то будет пустое пространство.

[nowm]

@romaromk там фиксированная высота только для того, чтобы инициализировать скролл. В «боевом» окружении её вообще не нужно задавать. Вся суть в том, что у контента нижний margin равен высоте футера, а сам футер имеет position: fixed; и z-index меньше, чем у контента, чтобы быть на заднем плане. Это даже проще, чем сделано на elementaryos.org. Там футер — это «окно», через которое видно вложенный DIV с position:fixed.

[nowm]

То есть, футер там — подложка, но выполняет роль окна, так как ему жёстко задана такая же высота, что и вложенного в него fixed-блока, но z-index установлен меньше. В общем, там замороченно сделано. @webvany проще сделал.

[Иван Желудков]

Даже я не понял, как там сделано, но примерно представляю. Но я и не смотрел сам ещё.

[Иван Желудков]

Теперь понял. Там сделали немного сложнее. Там не пришлось прописывать margin-bottom для остального контента. Они вставили Footer, а в него фиксированных текст (ссылки, меню и пр.). То есть текст ездит за контентом, как и у меня (только у меня он ездит вместе с футером). Я бы скорей всего поступил как они, это проще для дальнейшего редактирования, как мне кажется. Хотя не уверен, всё зависит от случая.

[Krasnorepov]

@webvany ваш код работает, но я так и не смог сделать высоту блока с контентом на 100% экрана. То есть, допустим, на одной странице контента много и там всё выглядит хорошо, а на другой контента пару строчек и получается, что футер торчит на половину, что есть не эстетично. На сайте, который я привел в качестве примера блок с контентом перекрывает всю высоту экрана, даже если контент не заполняет всю высоту (пример: elementaryos.org/answers/why-no-dexter). Сколько я ни копался в ихнем коде, так и не хватило ума сделать также :(

[Иван Желудков]

@Krasnorepov, там проблема решена, кажется, с помощью overlow-y (htmlbook.ru/css/overflow-y) Попробуй. Я тоже щас попробую

[Иван Желудков]

Решил. Блоку задаём min-height: 100vh; и имеет минимальную высоту по высоте окна посетителя. codepen.io/Vany/pen/yokmi

[Krasnorepov]

@webvany огромное спасибо, это именно то, что нужно!

Answer 2

[Clear]

На том же сайте блоку с контентом дано свойство
box-shadow: 0px 4px 15px #181818
Если я вас правильно понял. Это тень, которая создает такой эффект.

Comments

[Krasnorepov]

Нет, я не про тень, а про эффект "нахлеста" при вертикальном скроллинге.

[Clear]

Похоже на параллакс...

[Krasnorepov]

Может быть, спасибо за наводку. Буду изучать.

Answer 3

[Иван Желудков]

Можно сделать footer фиксированным (position: fixed; bottom: 0; z-index: -1), а остальной контент страницы сделать с margin-top: высота footer. Точно сказать не могу. Но должно получится что-то. Щас попробую сделать на codepen