CODEWITHSUNDEEP
safariheightflexbox
Dd.
Dd.

Reputation: 23

div height: 100vh versus 100%

in SAFARI 8 if you scroll down on a regular site, like facebook.com for example, you will notice that its content is faintly visible behind the semi-transparent menu bars at the top of the page.

i am trying to recreate this for my site. i have four independently scrolling columns, each with a varying quantity of images.

a mockup is here ---> http://mnml.cc/flex/index.html.

i would like to see these images faintly behind the menu bar, but i cannot figure out how to achieve that, and still keep the columns scrolling independently.

in this (failed) mockup, you can see the images behind the menu, but the entire page scrolls as one unit ---> http://mnml.cc/flex/fail.html.

i think it has something to do with the container's height -- "vh" versus "%" -- but i can't figure out what goes where. any advice would be greatly great appreciated.

many thanks and warmest regards, David.

Upvotes: 1

Views: 1143

Answers (1)

Phillip Dodson
Phillip Dodson

Reputation: 158

Using your first mockup as a reference, remove the bottom padding from your .container div. The padding is preventing the scrolling content from reaching the bottom of the window, meaning there's nothing behind the footer to be seen.

.container {
  padding-bottom: 0;
}

You can now make your footer semi-transparent. For example:

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

Hope this helps.

Upvotes: 1

Related Questions