100% height not working!

•

What is DaniWeb IT Discussion Community?

You're currently browsing the HTML and CSS section within the Web Development category of DaniWeb, a massive community of 391,912 software developers, web developers, Internet marketers, and tech gurus who are all enthusiastic about making contacts, networking, and learning from each other. In fact, there are 3,643 IT professionals currently interacting right now! Registration is free, only takes a minute and lets you enjoy all of the interactive features of the site.

Join our community!

Please support our HTML and CSS advertiser: Lunarpages Web Hosting

Thread Tools Display Modes

Views: 3132 | Replies: 2

•

Join Date: Nov 2006

Posts: 12

Reputation: AnzJ is an unknown quantity at this point

Rep Power: 2

Solved Threads: 0

AnzJ

Offline

Newbie Poster

100% height not working!

Mar 22nd, 2007

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?

Help with Code Tags

(Toggle Plain Text)

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

and my CSS:

Help with Code Tags

(Toggle Plain Text)

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!

•

Join Date: Nov 2006

Posts: 17

Reputation: chewbacca810 is an unknown quantity at this point

Rep Power: 2

Solved Threads: 0

chewbacca810 chewbacca810 is offline

Offline

Newbie Poster

Re: 100% height not working!

Mar 22nd, 2007

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

•

Join Date: Mar 2007

Posts: 83

Reputation: rgtaylor is an unknown quantity at this point

Rep Power: 0

Solved Threads: 2

rgtaylor

Offline

Junior Poster in Training

Re: 100% height not working!

Mar 23rd, 2007

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