(CSS) defining a div's height relitave to the window size

**msimmons** · Apr 19th, 2002, 01:24 PM

I am trying to set a divs height to 100% but it is not listening.

Code:

<div style="width:100%;height:100%;overflow:auto;text-align:center;background:red;">

(i put the style for the sake of simplifying this post). If i set it to a specific size (not %) it will do it. Can anyone tell my why it wont work or another way to go about it?
thanks
michael

**msimmons** · Apr 19th, 2002, 01:32 PM

ok, it looks like if the 'containing block' (containing the item w/a height%) doesn't have a height specified then a %height is treated like auto... the containg block is my <body> so what to do?
thanks michael

scoutt · Apr 19th, 2002, 04:46 PM

put the whole thing in a table at 100%

**msimmons** · Apr 19th, 2002, 05:00 PM

man... now why didnt i think of that... i wasted all day thinking (or avoiding) on that prob.
thanks!
michael

**CiberTHuG** · Apr 24th, 2002, 05:02 PM

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>Test Page</title>
    <style type="text/css">
      .Container {
        height: 100%;
        width: 100%;
        background-color: red;
        color: black;
      }
    </style>
  </head>
  <body>
    <div class="Container">
    </div>
  </body>
</html>

This works, and you don't have to hork your page with a table. Also, try setting the padding and margins to zero, or making the div position: absolute, so it won't be contained by the body block. For more fun, try setting the dimensions to 110%.

**CiberTHuG** · Apr 24th, 2002, 05:09 PM

Sorry, had too much fun...

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>Test Page</title>
    <style type="text/css">
      body {
        padding: 0px;
      }
      .Container {
        height: 100%;
        width: 100%;
        margin: 0px;
        padding: 0px;
        background-color: red;
        color: black;
      }
    </style>
  </head>
  <body>
    <div class="Container">
    </div>
  </body>
</html>

That is the same as setting the body's background-color to red.

**msimmons** · May 6th, 2002, 09:58 AM

The 'content' div idea didnt have the desired effect. I am trying to get the overflow value to work on a div so that when the content is more than the size of the window (this is a popup that is dynamic so I never know how much data is going to be inside) it creates a scrollbar.
The table idea did work but I prefer divs.
thanks,
Michael

ps sorry about the late response... being the only comp person in the dept I jump from proj to proj.

**CiberTHuG** · May 6th, 2002, 11:29 AM

And "auto"and "scroll" don't work for "overflow" values?

**msimmons** · May 6th, 2002, 11:32 AM

Code:

<div style="width:100%;height:100%;overflow:auto;text-align:center;">

works when inside of a 100% table but that was the only way I could get it to work.
Michael

**CiberTHuG** · May 6th, 2002, 11:57 AM

Dude, I have no idea what you are trying to do then.

If this doesn't work, then explain again what you want.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>Test Page</title>
    <style type="text/css">
      body {
        padding: 0px;
      }
      .Container {
        height: 100%;
        width: 100%;
        margin: 0px;
        padding: 0px;
        background-color: red;
        color: black;
        overflow: auto;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <div class="Container">
      <span>Sample Text</span>
    </div>
  </body>
</html>

**msimmons** · May 6th, 2002, 01:12 PM

When I use the example you are posting it works perfectly but when I impliment it into my existing page the scrollbars appear late and the down arrow is just off screen. It's working fine w/the table so no worries.
Thanks
Michael

Thread: (CSS) defining a div's height relitave to the window size

Thread Tools

Display

(CSS) defining a div's height relitave to the window size

Posting Permissions