Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4

Thread: vertical strech

  1. #1
    New Coder
    Join Date
    Dec 2010
    Posts
    21
    Thanks
    1
    Thanked 0 Times in 0 Posts

    vertical strech

    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.

  • #2
    Regular Coder
    Join Date
    Oct 2010
    Location
    San Antonio Tx
    Posts
    251
    Thanks
    12
    Thanked 11 Times in 11 Posts
    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

  • #3
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,672
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    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>
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #4
    New Coder
    Join Date
    Dec 2010
    Posts
    21
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thanks for the feedback. The analogy of stacked pages was good.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •