Stretch a section of page to full height and width

[Historical Forums User]

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

[cpyle0819]

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

[Historical Forums User]

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.

[Fourize]

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.

[Senff]

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/

[Fourize]

Spot on, thanks Senff

[Historical Forums User]

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?

[Historical Forums User]

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?

[juliane]

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]

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…

[Historical Forums User]

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?

[rguimaraens]

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…

[esjosemartinez]

look at this:

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

[Author]

Posts