Absolute positioned div width/height in IE (all versions)_问答_开发者

Absolute positioned div width/height in IE (all versions)

开发者 https://www.devze.com 2023-03-27 09:18 出处：网络

My knowledge of css is very limited.In a larger context, I need to do something like the following: Inner div goes inside other divs.I am trying to position the inner div, offset from the browser win

相关专题：css

My knowledge of css is very limited. In a larger context, I need to do something like the following:

Inner div goes inside other divs. I am trying to position the inner div, offset from the browser window and with a size that is certain percentage of the browser window. So I apply the following css to the inner div

.abs_pos {
    position: absolute;
    top: 25%;
    left: 25%;
    width: 50%;
    height: 50%;
    background-color: yellow;
    z-index:1002;
开发者_运维问答    overflow: auto;
}

This works on Chrome and Firefox. But on IE (all version), the inner div's width becomes a percentage of the immediate outer div and not that of the browser window, while the height appears to be determined based on the content of the inner div.

I have the link here to the sample html file. http://orissaclassifieds.com/pos.html

So how can I make this work? Thanks for your help.

Your current code should work, but you are using an invalid/incomplete doctype which is sending IE into quirks mode.

For HTML4.01 Transitional it should be:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

However, a much shorter/simpler doctype to use is HTML5's. It will trigger standards mode in all browsers:

<!DOCTYPE HTML>

You can make it work in all browsers by making the parent div have a css rule:

position:relative;

excuse me, but i don't understand why you use percentage for every parameter, also width and height inside another div... unless the main container is the body page. In your case i should use pixels, and if the div is placed into another div you can use relative instead of absolute...that is relative to the container where you're into...hope this helps