Высота div: 100vh против 100%

в SAFARI 8, если вы просматриваете обычный сайт, например facebook.com, вы заметите, что его содержимое слабо видно за полупрозрачными меню в верхней части страницы.

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

здесь находится макет --->http://mnml.cc/flex/index.html.

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

в этом (неудачном) макете вы можете видеть изображения за меню, но вся страница прокручивается как единое целое --->http://mnml.cc/flex/fail.html.

я думаю, что это имеет какое-то отношение к высоте контейнера - "vh" против "%" - но я не могу понять, что там происходит. любые советы были бы очень оценены.

большое спасибо и теплый привет, Дэвид.

1 ответ

Используя свой первый макет в качестве ссылки, удалите нижнее дополнение из вашего.container div. Прокладка препятствует проникновению содержимого прокрутки в нижнюю часть окна, что означает, что ничего не видно за нижним колонтитулом.

.container {
 padding-bottom: 0;
}

Теперь вы можете сделать свой полупрозрачный нижний колонтитул. Например:

.footer {
 background-color: rgba(0, 0, 0, .8);
}

Надеюсь это поможет.

licensed under cc by-sa 3.0 with attribution.