Menu icon Foundation
Row height = View-port Height?

This might be a noob question, but I want a certain or every 'row' to automatically have the size of the view-port it's viewed on. How do i accomplish that? I've seen people using sections in flat websites, but i still don't know how to do that.

This is not a perfect example but should give an idea.
http://tympanus.net/Development/SectionSeparators/

rowrow height

This might be a noob question, but I want a certain or every 'row' to automatically have the size of the view-port it's viewed on. How do i accomplish that? I've seen people using sections in flat websites, but i still don't know how to do that.

This is not a perfect example but should give an idea.
http://tympanus.net/Development/SectionSeparators/


Brandon Arnold gave the most helpful answer for this post
Brandon Arnold over 5 years ago

100% height won't find the viewport height, you'll need to use the 100vh.

Here's a codepen
http://cdpn.io/EHLim

Enjoy

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

Wing-Hou Chan over 5 years ago

Hi Shreekar!

.row
{
   height: 100%
}

Remember to apply height: 100% to any parent elements, including html and body.

I wouldn't recommend applying height to the row class though as you might need to use row elsewhere, where you don't want it to be the height of the viewport.

To solve this problem assign another class with height: 100% to your elements that need too fill the height of the viewport.

Brandon Arnold over 5 years ago

100% height won't find the viewport height, you'll need to use the 100vh.

Here's a codepen
http://cdpn.io/EHLim

Enjoy

Shreekar Chonkar over 5 years ago

Thank you both of you.
Brandon's option works best for me :D