CSS height 100% in IE7

Question

I have a difficult layout in my website and I have a problem now with IE7. How can I in this example set the inner wrapper to fill the height of the outer wrapper?

http://jsfiddle.net/fMPNw/2/

Answer 1

You have to explicitly define the height of .wrapper, in that situation. That being said, if your top: and bottom: attributes are going to make the height dynamic, your only solution is resetting the height with JavaScript, binding the height to update on window resize, etc.

Answer 2

I was able to get .wrapper2 to layout correctly by making it absolutely positioned. Using the following 2 lines of CSS, width to correct the width issue caused by absolute positioning.

position:absolute;
width:100%;

End result being:

.wrapper{
    position: absolute;
    top: 310px;
    bottom: 130px;
    border: 1px solid red;
    width: 100px;
}
.wrapper2{
    border: 1px solid blue;
    height: 100%;
    width:100%;
    position:absolute;
}