...

View Full Version : vertical strech



RedLars
12-13-2010, 05:44 PM
Hello,

I am using this html page to test some css styles.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
<title></title>
<LINK href="default.css" rel="stylesheet" type="text/css">
</HEAD>
<BODY>
<div class="wrapper">
TEST
</div>
</BODY>
</HTML>


To strech the page vertically this works in firefox atleast


.wrapper
{
height:100%;
width:650px;
margin-left:auto;
margin-right:auto;
border-style:solid;
border-width:1px;
border-color:black;
}

html, body {
height:100%;
}

Why do I need to set height equal 100% for three different elements (html, body and wrapper) ? Just would like to understand what is happening.

NoeG
12-13-2010, 05:52 PM
you should change the class=wrapper to id=wrapper and then .wrapper to #wrapper in your html you dont have to but its better because your not going to need another wrapper with the same styles again..thats the diference between class and id

and also you could just take out the height:100% if you want the wrapper to expand as you add to it..

the .wrapper just targets your div class=wrapper not anything else but you set the height to 100% so it takes up the entire height of your body

Excavator
12-13-2010, 06:06 PM
Hello RedLars,
Think of the HTML elements as tranparent pages that you are stacking in layers. <html> is the first layer, <body> the second and your .wrapper the third.

Use an example like this and watch what happens when you remove the height: 100%; from any one of those layered elements -
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html {
height: 100%;
background: #FC6;
}
body {height: 100%;}
#container {
height: 100%;
width: 650px;
margin: 0 auto;
border: 1px solid #000;
}
</style>
</head>
<body>
<div id="container">
<!--end container--></div>
</body>
</html>

RedLars
12-14-2010, 08:17 PM
Thanks for the feedback. The analogy of stacked pages was good.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum