How to make div container the full height of the screen?

css, html

Solution

You have either the CSS unit `vh` that is in centieth of viewport height. In which case you would write:

height: 100vh;

Or you can force the div to stick to top and bottom of the closest positioned parent (so give `position:relative` or `position: absolute` to a parent that has the appropriate height):

position: absolute;
top: 0;
bottom: 0;

tell me if you need more details

Problem

Ok so I am making my first iOS HTML5 app and it is just a simple quote app. I need to figure out how to make my container div be the full height of the iphone. Here is a jsfiddle of my design - http://jsfiddle.net/gKaDL/1/ ``` .container { width: 640px; min-height: 100%; background-size: cover; background-position: center; background-color: #1a1a1a; } ``` Because a lot of the quotes are short the container div will not reach the iPhone 4 screen height of 960px let alone the iPhone 5's 1136px height. The container div must be the size of the screen or larger as there is a background image on it that must fill the screen. Thanks.

Original source