Menu icon Foundation
100 % div height of browser window

Hi!

I need to make one page with full screeen bacground images and two content areas.
Please look at the picture.

So I have one 100% height transparent div at the left , background and right side div.

Is Foundation right tool for it or it will be faster and better to do it with plain CSS?

Shall I put two divs in one row?

Thank you!

P.S. I consider Foundation because I want some text info to be shown and some part to be hidden on smartfones and I know Foundation has some tools for it.

                           better

100% height

Hi!

I need to make one page with full screeen bacground images and two content areas.
Please look at the picture.

So I have one 100% height transparent div at the left , background and right side div.

Is Foundation right tool for it or it will be faster and better to do it with plain CSS?

Shall I put two divs in one row?

Thank you!

P.S. I consider Foundation because I want some text info to be shown and some part to be hidden on smartfones and I know Foundation has some tools for it.

                           better

This post has been closed. No new replies can be added.

Rafi Benkual over 4 years ago

100vh gets you 100% viewport height.

You can make a left column and right column both 100vh.

Make the background 100vh as well.

Here is how I did it: http://codepen.io/rafibomb/pen/raZqrz

You'll want to add media queries to change the sidebar height and make the intro centered on small.

Mikhail Svirkin over 4 years ago

Rafi, thanks for your quick reply!

It is what I'm looking for.