IE and absolute positioning divs

StackOverflow https://stackoverflow.com/questions/1968067

Question

This problem is only in IE. Consider the following HTML:

 <html>
 <body>
 <div style='position:absolute;left:1em;right:1em;top:1em;bottom:1em;overflow:auto;>
 Put more than a full screen of text in here.  It *should* create a scroll inside the div.
 In IE, it stretches the div out vertically.
 <div>
 <body>
 <html>

If you put a ton of text in the div, IE will stretch the div out beyond the declared "bottom". I know what it is doing. It considers the bottom of the page to be the bottom of the page after all of the text has been rendered. I want bottom to be the bottom of the visible window. So, I want to have a div that is centered inside the window. Is there some retarded hack to make IE comprehend the basic concept of CSS?

Was it helpful?

Solution

When using conflicting absolute positions don't forget the fix for IE6 under the 'Creating the exception for IE5 and IE6' header in that article.

OTHER TIPS

You could try using a conditional comment to add overflow:auto; for IE only.

body: 100%;

div#id height: 100%;
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top