SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Member
    Join Date
    Oct 2013
    0 Post(s)
    0 Thread(s)

    Talking Foundation by Zurb How do I create a window responsive div.

    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:

    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.

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Hampshire UK
    182 Post(s)
    6 Thread(s)

    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.).


Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts