DIV высота CSS регулировки

у меня есть следующий DIV в моем веб-сайте:DIV высота CSS регулировки

<!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 не полностью отображается, когда экран resoultion ниже 1024x768 (т.е. 800x600). верхняя и нижняя часть всплывающего окна обрезаются.

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

источник

2010-01-13 dan

переполнения: авто; максимальная высота: 90%; максимальная ширина: 90%; будет решать размеры и полосы прокрутки, но не центрирование, которое зависит от размеров пикселей. – Quentin

Вы бы лучше обнаружения окна браузера клиентской области, а не разрешение экрана.

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 }; 
    } 
}

источник

2010-01-13 12:52:58 Graza

После яваскрипта код может помочь вам получить ширину & высоту экрана:

window.screen.width 
window.screen.height

источник

2010-01-13 12:52:43

Have a look at this

источник

2010-01-13 12:59:14 r3zn1k

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

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

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

<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>

источник

2010-01-13 12:59:43 Daan

DIV высота CSS регулировки

ответ

Смежные вопросы