HTML/CSS - No 100% height on div in IE

Okay, so I've got a problem - and I'd love to have it fixed.

I am using my favourite way of setting up a simple header/content/footer layout. The problem is that any elements I add to the 'content' div of my layout can not be expanded to 100% in Internet Explorer (as far as I know, IE only). I understand there is no height declared to the 'content' element, but because of the style of its positioning (declaring an absolute top AND bottom), the element fills the desired area. (The content element has a background color defined so you can see that the div is in fact filling between both the header and the footer.)

So my problem is, since the div is clearly expanded between the two, why can't a child be set to 100% to fill that area? If anyone has any solutions, I'd love to hear them. (I'm looking for a solution that won't involve designing by an entire different layout.. or at least perhaps an explanation of why this is happening. I'm assuming at this point it's because of the lack of a height declaration -- but the div is expanded, so I don't get it!)

Here is the code as used on the page:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta name="robots" content="noindex" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>No 100% height on 'content' child div in IE</title>
    </head>
    <style>
    html, body {
     width:100%;
     height:100%;
     margin:0px;
     padding:0px;
    }
    body {
     position:relative;
    }
    #wrapper {
     position:absolute;
     top:0px;
     width:960px;
     height:100%;
     left:50%;
     margin-left:-480px;
    }
     #header{
      position:absolute;
      top:0px;
      left:0px;
      width:100%;
      height:200px;
      background-color:#999;
     }
     #content{
      position:absolute;
      top:100px;
      bottom:50px;
      left:0px;
      width:100%;
      background-color:#F7F7F7;
     }
      #content_1{
       width:200px;
       background-color:black;
       height:100%;
       float:left;
      }
     #footer{
      position:absolute;
      bottom:0px;
      left:0px;
      width:100%;
      height:50px;
      background-color:#999;
     }  
    </style>

    <body>
    <div id="wrapper">
     <div id="header">
        </div>
        <div id="content">
         <div id="content_1">
            </div>
        </div>
        <div id="footer">
        </div>
    </div>
    </body>
    </html>

Answers


Try this:

#content_1{
width:200px;
background-color:black;
height:100%;
position: absolute;
}

IE 7 and below assign a value called "hasLayout" to elements that need positioning. Sometimes to work out little quirks like this you have to force an item to have a layout which in this case means setting its position to absolute.


Need Your Help

MPI and OpenMP on Desktop CPUs

mpi openmp

I was just wondering how is it possible that OpenMP (shared memory) and MPI (distributed memory) could run on normal desktop CPUs like i7 for example. Is there some kind of a virtual machine that can

In Android, How to get HTML source code into a String?

java android html

I would like to get the source code from an url. But all things i found, is deprecated or it's no what i want, so i still searching, but i find nothing.