Foundation by Zurb How do I create a window responsive div

HTML & CSS
1

Hi guys im new to Foundation. How would I go about having a div that size fits the users browser window size on load.

Here is some examples:
[B]
http://www.thedesignfilesopenhouse.com/[/B]
Here you will see the slideshow fits the users browser window and if you re size your window and refresh the page it will load again to fit the browser window.

In other words I want a div that fills the users browser window before they scroll to other content.

Thanks in advance.
Endder

2

Hi,

I’m afraid I don’t know foundation but doubt what you are asking for has any specific relevance to foundation anyway.

You can set a div to be the height of the viewport simply by setting a min-height of 100% (assuming its the first element in the page and that you have also set html,body{height:100%}). Se the CSS FAQ on 100% height for more info.

If you are looking for a full page image slider then something like backstretch should do the trick.

If you want to cover that 10% div with an image then with some CSS3 (ie9+) you can do something like this (just view source as the code is in the head.).