Grow your CSS skills. Land your dream job.

Stretch a section of page to full height and width

  • # March 25, 2012 at 4:23 pm

    Here is a page that is sliced in sections (not the html5 tag-section). Each section is 100% percent of the window. Well not if you rezise it but of your maximum height. I can’t found out how to do that. How do I do?

    And here is another page
    I am curently learning parallax scrolling so I want to do a page that looks exactly like this (well not the content). The page is 100% percent of the browser window. Even when resized. How do I do that?

    Thank you
    Alfred Larsson

    # March 25, 2012 at 8:05 pm

    Not really understanding your question. Are you having trouble with small margins on your page edges?

    # March 25, 2012 at 8:28 pm
    #page-wrap {
    position:fixed !important;
    position:absolute;
    top:0px;
    right:0px;
    bottom:0px;
    left:0px;
    }

    ???

    # March 26, 2012 at 5:37 am

    Well, I mean if I want to do exactly like the first link. How do I do? I can’t use fixed because it has to be scrollable.

    # March 26, 2012 at 7:21 am

    If I’m right in understanding your question, you would use jquery to get the width and height of the users window and apply that with inline styling to the containers. Each has relative positioning which would allow scrolling. Use firebug and check out their method.

    # March 26, 2012 at 7:36 am

    Here’s a quick fiddle that shows how you can put a bunch of DIVs after eachother that all have the full height of the viewport: http://jsfiddle.net/senff/WdF89/1/

    # March 26, 2012 at 11:27 am

    Spot on, thanks Senff

    # March 26, 2012 at 1:35 pm

    Thank you very much! Well I use Chrome Developer tools. I think it is the same. The thing is that I haven’t found anything there

    Now how do I make the div be as big as the window when I resize the window?

    # March 26, 2012 at 2:04 pm

    Well, it didn’t reszied in jsfiddle but it did when I tried with a html-document. If I turn the question. How do I make so it canät me resizable?

    # March 30, 2012 at 10:30 am

    hi, I’m trying to do the exact same thing here. but now i’m trying to figure out how to make it ajustable for when the user resize the window.

    any help, please?

    xpy
    # March 30, 2012 at 3:10 pm

    I think it is probably a resize listener like this one with jQuery.
    But I am pretty sure you can do this with CSS (only) too…

    # April 12, 2012 at 1:21 pm

    this is the link that senff posted: http://jsfiddle.net/senff/WdF89/1/

    The problem with that is that if the content in the div is higher than the div. it will go nuts and go in front of the div underneath. like this http://jsfiddle.net/WdF89/5/

    How do I make the divs min-height as big as the screen?

    # June 1, 2012 at 12:35 am

    Hey, affelarsson, I found a way here: http://www.tutwow.com/htmlcss/quick-tip-css-100-height/

    I did the following:


    html {height: 100%}
    body {height: 100%}
    section {min-height: 100%; clear:both; height:inherit; width:inherit;}

    hope it helps…

    # June 25, 2013 at 5:07 pm

    look at this:

    http://stackoverflow.com/a/9220751/2039300

Viewing 14 posts - 1 through 14 (of 14 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".