Setting a Div height to the window viewport size

[TreeRoot]

It seems to me you’re looking for something like a responsive, fullscreen background slideshow. Something like this:

demo: http://buildinternet.com/project/supersized/slideshow/3.2/demo.html

info:
http://buildinternet.com/project/supersized/

or this:
demo: http://www.pixedelic.com/plugins/camera/development/camera_1.0.6/demo/fullscreen.htm

info:
http://www.pixedelic.com/plugins/camera/

Just google some combination of the words “fullscreen, background, slideshow, responsive” to find a bunch more.

[tylerhq]

Something like Senff’s JS can work for you. There’s a couple things we need to do:

• Find the window height on resize
• Refresh the slideshow to fit this new size.

Acquiring the dimensions of a window is pretty straightforward, but refreshing the slideshow is typically done within your slider plugin’s [API](http://galleria.io/docs/api/methods/#display “Galleria”).

A great answer is on [StackOverflow](http://stackoverflow.com/questions/5142742/resize-script-for-galleria “StackOverflow”).

[collyg]

why not just use CSS alone:

div
{
width = 100vh;
height = 100vw;
}
Where 100 is the full size (100% of the screen dimension – X(vw) or Y (vh) axis). and 10 would be 10% of same.

These are an uncomplicated and constant means to set elemetns at a specific percentage of the screen width and the screen height respectively, and this also responds to screen re-size elegantly!!

CollyG

[Paulie_D]

Actually, I wouldn’t recommend a width of 100vw as it doesn’t account for scrollbars

div {
width = 100%;
height = 100vw;
}

is preferred I believe.

[nicooga]

This works:

.full-viewport-heigth {
  heigth: 100vh;
}

I needed to substract the height of the top bar, so I used calc:

.main-carousel {
  heigth: calc(100vh - 64px);
}

[Author]

Posts