The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Stretch a section of page to full height and width

  • This topic is empty.
Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
  • #37334

    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


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


    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.


    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.


    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:


    Spot on, thanks Senff


    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?


    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?


    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?


    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…


    this is the link that senff posted:

    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

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


    Hey, affelarsson, I found a way here:

    I did the following:

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

    hope it helps…

Viewing 13 posts - 1 through 13 (of 13 total)
  • The forum ‘CSS’ is closed to new topics and replies.