CODEWITHSUNDEEP
cssinternet-explorer-7
Enrique Moreno Tent
Enrique Moreno Tent

Reputation: 25237

CSS height 100% in IE7

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/

Upvotes: 3

Views: 2542

Answers (2)

Serhiy
Serhiy

Reputation: 2555

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

Upvotes: 0

Morgan Delaney
Morgan Delaney

Reputation: 2439

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.

Upvotes: 3

Related Questions