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
  • 398 Views
  • 3 Years Discussion Span
  • Latest Post Latest Post by fenderkris

Dani AI

Generated

The root cause is that percentage heights compute against a parent with an explicit height. was correct to flag that the body/html sizing differs between browsers, and ’s DOCTYPE advice is relevant: layouts in quirks mode can break height math. Modern, reliable fixes avoid those cross-browser pitfalls.

A simple, robust approach is to let the container size itself from the viewport instead of relying on parent percentages:

#outerContainer {
  min-height: 100vh;        /* fill the viewport height */
  width: 800px;
  margin: 0 auto;
  box-sizing: border-box;   /* keep borders/padding inside the height */
  border: 1px solid red;
}

For layouts with headers/footers or when children must stretch, a flexbox page layout is cleaner (keeps footer at the bottom and lets a middle panel grow):

body {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
  margin: 0;
}
#outerContainer {
  width: 800px;
  margin: 0 auto;
  flex: 1 0 auto;  /* grow to fill remaining space between header/footer */
  box-sizing: border-box;
}

Practical troubleshooting notes: confirm computed heights in DevTools; remember floated children can collapse a parent (use a clearfix or overflow:auto on the parent); borders/padding affect visual size unless box-sizing is set; and on mobile browsers 100vh can include the browser UI (workarounds include a small JS-set CSS variable or using flex layouts). The earlier suggestions from and about setting html/body heights work when using percentage heights, but for a future-proof solution prefer min-height:100vh or a flexbox page layout.

Recommended Answers

All 4 Replies

Member Avatar for chewbacca810

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

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.