100% height not working!

Hi Guys, this should be a no-brainer.

I have a div, and i'd LIKE it to stretch to 100% of my browser window. Unfortunately, it doesn't happen like that. The div shows up, but its very small height wise. CAn anyone see problem with this code?

<body>
<div id="outerContainer" class="container">
  This div should be the same height as the browser window 
</div>
</body>

and my CSS:

body{
 margin:0px;
 padding:0px;
 height:100%;
 min-height:100%;
 border:3px green solid;
}
 
div.container{
 width:800px;
 margin-left:auto;
 margin-right:auto;
 border:1px red solid;
 height:100%;
}

Much appreciated!

AnzJ

Newbie Poster

12 posts since Nov 2006

Reputation Points: 20

Solved Threads: 0

5 Years Ago

your css will work in firefox. sounds like the same issue:

http://archivist.incutio.com/viewlist/css-discuss/62109

i would be force standards compliance on browsers, using strict doctype, first. that should do the trick. i can't test ie (i assume your testing on ie), as i don't have, so you're on your own on that one

chewbacca810

Newbie Poster

17 posts since Nov 2006

Reputation Points: 17

Solved Threads: 0

5 Years Ago

One issue is the concept of "containers"... The div tag is a container, but it is contained in the body tag... the body tag, unfortunately is not trated the same on all browsers... in some it is sized to fit the browser's available space... in some browsers the body tag is sized to fit the minimum height required to fit the current contents.... So a div tag set to 100% would size differently on each...in fact if empty, the div tag might not even show up on some browsers, since an empty body would be, potentially, 0px high...

try adding height="100%" and width="100%" to your body tag... and test again...

This works for me on IE and Firefox, give me a second and I'll check my Opera too... Yea, it is working Opera too...

Using strict may not help as most browsers are now set to default to strict unless you page forces them otherwise...

rgtaylor

Junior Poster in Training

88 posts since Mar 2007

Reputation Points: 10

Solved Threads: 2

1 Year Ago

Show Comments

Earlier i also faced the same problem, so as the problem i used a method by which the problem solved. you can use the HTML Tag for width and Height issue

just write

html{
width:100%;
height:100%;
}

rv27

Newbie Poster

1 post since Jun 2010

Reputation Points: 10

Solved Threads: 0

1 Year Ago

Try using this CSS, I entered some Lorem Ipsum text and the red border rendered as it should in all browsers.

body{
      margin:0px;
      padding:0px;
      height:100%;
      border:3px green solid;
   
      }
      #outerContainer{
      width:800px;
      margin-left:auto;
      margin-right:auto; 
      border:1px red solid;
      height:100%;      
	  	  }
</style>

Hope this helped:)

fenderkris

Newbie Poster

1 post since Jun 2010

Reputation Points: 10

Solved Threads: 0

This article has been dead for over three months

You