CODEWITHSUNDEEP
htmlcss
user3479267
user3479267

Reputation: 232

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

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.

Upvotes: 2

Views: 5230

Answers (2)

Sheraff
Sheraff

Reputation: 6682

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

Upvotes: 6

AlokMaurya
AlokMaurya

Reputation: 5

div{
margin:0px auto;
width:100%;
height:100%;

}

Upvotes: 0

Related Questions