How White Levlen Tablet Works

CSS 100% height in DIVs

CSS 100% height for DIV

Sometimes it happens that DIV elements 100 % must be high. What you need

100% high div elements? Often websites are designed to take 100% of the height to take advantage of the browser window. In the days of AJAX and Web 2.0 are increasingly DHTML open windows and the rest of the page are grayed out.

When we consider how an HTML page is built, it is actually quite simple.

is given the following HTML:



" http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
\u0026lt; html xmlns = "http://www.w3.org/1999/xhtml " >
\u0026lt; head >
\u0026lt; title > Untitled Page title >
     < link   href ="styles.css"   rel ="stylesheet"   type ="text/css"   />
head >
< body >
     < form   id = "Form1" >
\u0026lt; div id = "page" >
div>
form >
body >
html> The element

with id "page" is to use 100% of page height and 48.7em (this corresponds to normal settings about 780px) wide. In order for the item on the white side is visible, it can be temporarily dyed red.

normally you would go now and write the following format for the id "page" in the CSS file:

# page {height

: 100%;
width : 48.7em;
background-color: red;}


Thus there are no edges will be the BODY and FORM format also: margin

body, form {

: 0px;
padding: 0px;}


with the result that our DIV only holds one line high, red and 48.7em is broad, although 100% is specified.

Up to this point all will have come ... ;-)

100% is a relative indication. So we have to questions: "100% of what?"
From the window clear. But where setting the CSS how high the window is? Not at all!

CSS formatting elements relative to the previous one, or relative to the parent. Sun positioning in most cases be made relative to the previous item. And most others, relative to the parent.

What does that mean? This means that the DIV now has 100% the height of the preceding element, or do the amount of white space character within the DIV

What? The solution is obvious. We had to put the elements of HTML, BODY, and FORM also on 100% height:

html, body, form

{height: 100%;
margin: 0px;
padding: 0px;}

# page

{height: 100%;
width: 48.7em;
background-color: red;}


HTML as the last element is to ensure as high as the frame of the browser window, and the children of BODY and FORM are just as high as the relevant superior.

In IE7, the FORM tag is not mistakenly taken into account. It would therefore require only HTML and BODY make 100% in size. Firefox and Opera need however, a 100% high FORM tag.