IE7 bug with div that changes the height
Question
I have a code like this:
<body>
<div id='wrapper'>
<div id='content'>
<!--content that changes his height-->
</div>
<div id='footer'>
<!--Footer content-->
</div>
</div>
</body>
And the css is something like this:
#wrapper{
width : 1024px;
position : relative;
}
#footer{
position : absolute;
bottom : 0;
left : 0;
}
Inside the div#content I have some divs that can be expanded or reduced, so when they are expanded its height increase, increasing the height of the container div#wrapper. In all modern browsers, the footer position is recalculated properly and the footer is placed at the very bottom of the wrapper div, but in IE7 that doesn't occur: the footer remain in the same place that was before the wrapper increase its height.
Making some googling, I found that the most likely reason for this behavior was the "hasLayout bug", so I added the property zoom : 1 to the div#wrapper, but the problem didn't disappear, so I tried adding this property to other elements like the #footer without any success.
I am completely clueless...
Anyone has some idea of what is going on?
Thanks in advance.
1 answers
solution1
0 2013-05-01 09:20:34
Ok, finally I found a solution. I removed the position : absolute, and I set the height and width of the footer. Here I found something weirder ( at least for me it was). The wrapper has a width of 1024 px. If I set the width of the footer to 1024 px, it overflow the wrapper using more than 1024 px. If I set the width to 100%, the same problem. I had to set the width to 91,5% to adjust it to the 1024 px of the wrapper. Somebody knows the reason for this?
Thanks for the comments.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.