ansaurus

Question

Answer 1

A:

Following javascript code may help you to get the screen's width & height:

window.screen.width
window.screen.height

Sachin Gaur 2010-01-13 12:52:43

Answer 2

A:

You would be better off detecting browser window client area rather than screen resolution.

function getWindowClientArea(){
  if( !isNaN(parseInt(window.innerWidth,10))) { //Non-IE
    return { width: window.innerWidth, height: window.innerHeight };
  } else if( document.documentElement && (document.documentElement.clientWidth || document.documentElement.clientHeight ) ) { //IE 6+ in 'standards compliant mode'
    return { width: document.documentElement.clientWidth, height: document.documentElement.clientHeight };
  } else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) { //IE 4 compatible
    return { width: document.body.clientWidth, height: document.body.clientHeight };
  }
}

Graza 2010-01-13 12:52:58

Answer 3

+1 A:

Have a look at this

r3zn1k 2010-01-13 12:59:14

Answer 4

A:

I think the best way is to do this with JavaScript.

But if you absolutely want to write it with CSS, you can use @media specific CSS rules.

Try this :

<style type="text/css">
        .popup
        {
            float: left;
            position: fixed;
            top: 50%;
            left: 50%;
            margin-left: -332px;
            margin-top: -260px;
            width: 665px;
            height: 550px;
            border: solid 1px blue;
            z-index: 100;
        }

        @media all and (max-device-height: 1023px){
            .popup {
                height: 450px;
                overflow: scroll;
            }
        }
</style>

Daan 2010-01-13 12:59:43

ansaurus

tags:

views:

answers:

div css height adjusting

related questions