0

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
9
Views
10 Years
Discussion Span
Last Post by fenderkris
0

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

1

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

0

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

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.