Height

**CimminyCricket** · 08-04-2008, 08:18 AM

I use CSS/HTML Div to create a container that holds all the information on my website. Thing is, for some reason I can't set the height of that container to 100%. If I set it, it completely closes on all the content on that page, however large, and the content then falls outside of the container and into the background. How do I fix this? I have to separate style sheets, one for pages with little content, and then one for pages with tons. How can I get the ideal height: 100%; to work? Does it work at all?

**o_O** · 08-04-2008, 09:58 AM

The height property of block elements (<div> is our block in this case) only works with a percentage if its parent element has a height attribute to which it can scale. Basically, it means that you need whatever elements the div sits inside to all have the style "height: 100%;" right up to the top level.

Then you can simply assign the height of the document to be 100% and your divs should fill up whatever space is there:

PHP Code:


<!-- Not actually PHP :p -->
<html>
  <head>
    &lt;style type="text/css">
      html > body { height: 100%; }
      body { background-color: black; }
      .fullHeight { height: 100%; }
      .lolClass { background-color: blue; }
      /* other styles here */
    </style>
  </head>

  <body>
    <div class="fullHeight"> <!-- Outer div -->
      <div class="fullHeight lolClass"> <!-- Inner div -->
        <center>This div should take up the full height of the page.</center>
      </div>
    </div>
  </body>
</html>

You can see that the blue background of the inner div takes up the full height of the outer div, which in turn takes up the full height of the page (or body, as defined in the CSS).

**CimminyCricket** · 08-04-2008, 10:03 AM

I didn't understand the majority of that.

I have 4 other div's in my container, main(center), menu(left), main_right(right), header (top), if I sent them, to 100% (main and header at least) and then give the left and right a specific height, will this fix the craziness?

**o_O** · 08-04-2008, 10:23 AM

Basically you need to take note of your document structure. That is, the tags and elements which occur inside of other elements. For example:

PHP Code:


<html>

  <head> <!-- parent is <html> -->

    &lt;style>

      /* whatever style */

    </style>

  </head>



  <body> <!-- parent is also <html> -->

    <div>

        The parent of this <div> is the <body> element, as it is inside the opening and closing tags of the body.

        <img src="whatever.gif" /> <!-- The parent of this <img> is the <div> tag, as you can see it occurs after the div opens, but before it closes below. -->

    </div>

  </body>

</html>

Hopefully you can see here that there's a hierarchy of elements:
- html > head > style
- html > body > div > img

In order to give an element a height of 100%, you need to progress right back up the hierarchy to <html>. It'd be easier to illustrate if you post the code in question; then I could demonstrate on the code you actually want to use.

**CimminyCricket** · 08-04-2008, 10:45 AM

PHP Code:


<html>
<head>
</head>
<body>
<div id="container">
<div id="header">Stuff</div>
<div id="main_right">Something</div>
<div id="menu_right">Some more things</div>
<div id="main">
<div id="padded">
Some things here, too.
</div>
</div>
</div>
</body>
</html>

Code:

#container {  
	color: black;
	background: white;
	font-size: 1.2em;
        border-top: none;
	margin-left: 100px;
        height: 2000px;
        height: 2150 !Important;
        width: 845px !Important;
        width: 840px;
        margin-left: 48px !important;
        margin-right: 140px; 
        margin-top: -10px;
        text-align: center;
        padding-bottom: -10px;
        padding-bottom: 0px !important;
}

div#main {
	width: 410;
        background: none;
        color: black;
        height: 1440px !important;
        height: 1430px;
        
        text-align: left;
        padding-left: 110px !Important;
        padding-left: 0px;
        padding-top: 30px;
        margin-left: 90px !Important;
}
div#main_right {
	float: right;
	width: 150px;
	color: black;
        background-image: url('RoundedMenu2.png');
        height: 1600px;
        height: 1950px !Important;
        margin-right: 0px !important;
        margin-right: -10px;
        
               
        
}
div#menu_right {
	float: left;
	width: 150px;
	background-image: url('RoundedMenu1.png');
        height: 1600px;
        height: 1950px !Important;
        text-align: left;
	      
}
div#header {
	width: 850px;
	background: none;
	font: normal 2.4em Verdana,sans-serif;
	line-height: 10px;
	text-align: right;
	height: 200px;
        margin-right: 0px !Important;
        margin-right: -5px;
}

**o_O** · 08-04-2008, 11:17 AM

Originally Posted by Cim

PHP Code:


<html>

<head>

</head>

<body>

<div id="container">

<div id="header">Stuff</div>

<div id="main_right">Something</div>

<div id="menu_right">Some more things</div>

<div id="main">

<div id="padded">

Some things here, too.

</div>

</div>

</div>

</body>

</html>

Code:

html > body { height: 100%; }

#container {  
	color: black;
	background: white;
	font-size: 1.2em;
        border-top: none;
	margin-left: 100px;
        height: 100%;
        height: 2150 !Important;
        width: 845px !Important;
        width: 840px;
        margin-left: 48px !important;
        margin-right: 140px; 
        margin-top: -10px;
        text-align: center;
        padding-bottom: -10px;
        padding-bottom: 0px !important;
}

div#main {
	width: 410;
        background: none;
        color: black;
        height: 1440px !important;
        height: 1430px;
        
        text-align: left;
        padding-left: 110px !Important;
        padding-left: 0px;
        padding-top: 30px;
        margin-left: 90px !Important;
}
div#main_right {
	float: right;
	width: 150px;
	color: black;
        background-image: url('RoundedMenu2.png');
        height: 1600px;
        height: 1950px !Important;
        margin-right: 0px !important;
        margin-right: -10px;
        
               
        
}
div#menu_right {
	float: left;
	width: 150px;
	background-image: url('RoundedMenu1.png');
        height: 1600px;
        height: 1950px !Important;
        text-align: left;
	      
}
div#header {
	width: 850px;
	background: none;
	font: normal 2.4em Verdana,sans-serif;
	line-height: 10px;
	text-align: right;
	height: 200px;
        margin-right: 0px !Important;
        margin-right: -5px;
}

Here you go. You only need two changes, the height of your container should be 100% and you need the body height declaration, both of which I added above.

**CimminyCricket** · 08-04-2008, 11:27 AM

Totally awesome, o_O.

If you were an item, I bet I could equip you for +100 to Internet.

Thread: Height

Thread Tools

Display

Height

Posting Permissions