vertical strech

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

Hello,

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

Code:

<!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

Code:

.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 -

Code:

<!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.