div css регулировка высоты - PullRequest
Новая
       4

div css регулировка высоты

1 голос
/ 13 января 2010

У меня есть следующий div на моем сайте: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
    <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;
        }
    </style>
</head>
<body>
    <div class="popup" >content content content...</div>
    body body body.....
    <br />

</html>

и этот css 

.popup
{
    float:left;  
    position: fixed;
    top: 50%;
    left: 50%;
    margin-left: -332px;
    margin-top: -260px;
    width: 665px;
    height:550px;
    z-index:100;
}

У меня проблема с тем, что div отображается не полностью, когда разрешение экрана ниже 1024x768 (т.е. 800x600). верхняя и нижняя часть всплывающего окна обрезается.

Я ищу код css или js, чтобы обнаружить клиента с разрешением ниже 600 (высотой) и изменит размер div и добавит полосы прокрутки. для всех остальных клиентов я хочу сохранить высоту div 550px;

Ответы [ 3 ]

0 голосов
/ 13 января 2010

Было бы лучше определить клиентскую область окна браузера, а не разрешение экрана. 

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 };
  }
}
0 голосов
/ 13 января 2010

Я думаю, что лучший способ сделать это с помощью JavaScript.

Но если вы абсолютно хотите написать его с помощью CSS, вы можете использовать @media-специфические правила CSS.

Попробуйте это: 

<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>
0 голосов
/ 13 января 2010

Следующий код JavaScript может помочь вам получить ширину и высоту экрана: 

window.screen.width
window.screen.height
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...