3

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/

4
  • Dont be a troll... In the history we can see that you have taken the "Thanks" out with your another fake account -_- Nov 17, 2011 at 0:01
  • 1
  • 1
    @Dbugger: Shredder was asking Nightfirecat (a member with over 2,000 reputation) why he removed the Thanks! part. You should not say thanks as part of your question.
    – Dennis
    Nov 17, 2011 at 0:04
  • @Shredder Sorry, I thought it was you who erased the "thanks". Now I get what happened. :P Nov 17, 2011 at 0:08

2 Answers 2

3

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.

1
0

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;
}
1
  • This won't solve the problem when people need inner elements not to be absolutely positioned. For example, when the inner element needs to be floated beside a second element. Of course, if your inner element can be absolute, you might as well use top: 0px; bottom: 0px; left: 0px; right 0px;
    – Frug
    Feb 26, 2014 at 19:49

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.