Member Avatar for andre1011

I have a <div> that will not extend all the way down the page even with the height set to 100% on the <html> and <body> and the div itself. It will not display correctly in ie7 or firefox.

I have an external style sheet but this is basicly the structure of the page

<html>
<head>
<body>
   <div id="wrapper">
      <div id="colWrapper">
      </div>
   </div>
</body>
</head>
</html>

CSS:

html {height:100%;}
          body{height:100%;}
          #wrapper{height:100%;}
          #colWrapper{height:100%}

I would like any help someone can give me thanks

  • 3 Contributors
  • 3 Replies
  • 112 Views
  • 3 Days Discussion Span
  • Latest Post Latest Post by andre1011

Dani AI

Generated

Your sample shows two common causes: invalid markup and a misunderstanding of how percentage heights work across browsers. In the posted HTML the <head> is opened but not closed before <body>, which can trigger different rendering in Firefox vs. IE. Fix the document structure and use a standards DOCTYPE first.

Correct skeleton (use this rather than the malformed ordering shown earlier):

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Page</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div id="wrapper">
    <div id="colWrapper"></div>
  </div>
</body>
</html>

Practical guidance to make a container fill the viewport reliably:

  • Percent heights depend on the parent having an explicit height; that is why 100% sometimes appears to “not work.” A modern, robust option is to use viewport units (100vh / min-height:100vh) or Flexbox so the wrapper stretches without fragile percent chains.
  • If inner elements are floated, the parent can collapse — use a clearfix or overflow:auto on the parent to include floated children.
  • For layouts that must fill the screen but still allow content to grow, prefer min-height or Flexbox (set the body to display:flex and make the wrapper flex:1).

Example clearfix (apply to a parent when children are floated):

.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

Use the browser devtools to inspect computed height and box model, and add temporary background colors to verify what the wrapper actually covers. ’s test shows it can render differently across browsers; is right that cross-browser differences exist, but with valid markup and one of the approaches above the div can be made to fill the viewport consistently.

Recommended Answers

All 3 Replies

Member Avatar for Member #269073

it works ok on ie7 and opera for me. 1 is not a ff user.

<html>
<head>
<style type="text/css">
html {height:100%;}
          body{height:100%;  background:#0066FF}
          #wrapper{height:100%; background:red}
          #colWrapper{height:100%; width:80%; background:yellow}
</style>

</head>		  
<body>
   <div id="wrapper"> wrapper text
      <div id="colWrapper"> colWrapper text
      </div>
   </div>
</body>
</html>
Member Avatar for MidiMagic

Generally you can't control the vertical height of a screen object to match the size of the browser window. This is because there are too many possibilities among different browsers and window sizes.

Div is also very poorly designed and implemented. It generally assumes the height of the tallest object inside it.

Member Avatar for andre1011

Thanks I got it to work in ie6 still working on firefox

it works ok on ie7 and opera for me. 1 is not a ff user.

<html>
<head>
<style type="text/css">
html {height:100%;}
          body{height:100%;  background:#0066FF}
          #wrapper{height:100%; background:red}
          #colWrapper{height:100%; width:80%; background:yellow}
</style>

</head>		  
<body>
   <div id="wrapper"> wrapper text
      <div id="colWrapper"> colWrapper text
      </div>
   </div>
</body>
</html>
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.