Member Avatar for AnzJ

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!

  • 5 Contributors
  • 4 Replies
  • 366 Views
  • 3 Years Discussion Span
  • Latest Post Latest Post by fenderkris

Recommended Answers

All 4 Replies

Member Avatar for chewbacca810

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

Member Avatar for rgtaylor

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

Member Avatar for rv27

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%;
}

Member Avatar for fenderkris

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:)

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.