...

View Full Version : XHTML strict, divs 100% height



inet1
08-21-2010, 06:02 PM
how to make those divs stretch 100% in height?


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>My page title</title>
</head>
<body>

<div style="width:600px; height:150px; background-color:red;">TOP</div>
<div style="width:600px; background-color:yellow;">MIDDLE</div>
<div style="width:600px; height:20px; background-color:blue;">BOTTOM</div>

</body>
</html>

The reaper
08-21-2010, 07:57 PM
Hello,

just as a suggestion, you might want to add the colors and styles to a css file so you could use it throughout your site (if you want it to show more than once) instead of having to code each one.

What exactly are you trying to accomplish? All I see here are three different sized and color boxes.

Anyway,
changing this:


width:600px; height:150px;

to this:


width:600px; height:100%;

will have the box automatically adjust to the height depending on the amount of content.

inet1
08-21-2010, 08:12 PM
Hello,

I would like to have three divs (top, middle and bottom) that are 100% in height of browser window.

Top and bottom divs are set to 150 and 20px.

height:100%; is not working

The reaper
08-21-2010, 10:27 PM
So you want to have three divs cover the entire browser page? I'm confused by the part "100% in height of browser window"?

inet1
08-22-2010, 09:23 AM
So you want to have three divs cover the entire browser page?
Exactly.

abduraooft
08-22-2010, 11:03 AM
You'd need to use faux columns, see http://www.alistapart.com/articles/fauxcolumns/



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum