Create 100% height of current viewport's height div

Question

How Can I create a 100% height div of the current viewport size?

I know there are many resolutions around there, and I want to create a div that is high enough to cover the current size of the viewport.

Suppose the viewport is at the moment the size of one of a 1920x1080 resolution screen, but Also, someone else from a 1024x768 resolution screen wants to view the page, I want the div to be displayed 100% of the height of the viewport it is displayed on.

Is it possible with just css?

`html, body, div.class_name {height: 100%;}` ? – Mr. Alien Feb 20 '14 at 16:13 — Mr. Alien, Feb 20 '14 at 16:13

score 1 · Accepted Answer · answered Feb 20 '14 at 16:19

1

give 100% height to html and body, as well as to the div.

answered Feb 20 '14 at 16:19

underscored

46
3

DreamWave · Answer 2 · 2014-02-20T16:26:15.293

-1

You can use a fixed position. Add this to the body:

<div style="position:fixed; width:100%; height:100%; top:0; left:0;"></div>

edited Feb 20 '14 at 16:26

answered Feb 20 '14 at 16:17

DreamWave

1,934
3
28
59

You forgot to add the `height:100%` to the `html,body` elements. – Alvaro Feb 20 '14 at 16:19
@Alvaro He won't need that as he is using `position:fixed;` – Mr. Alien Feb 20 '14 at 16:23
I don't know why I got downvoted though. – DreamWave Feb 20 '14 at 16:28

Create 100% height of current viewport's height div

2 Answers2