Question

我的网站上有以下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;
}

我有一个问题，当屏幕重新生成低于1024x768（即800x600）时，div未完全显示。弹出窗口的顶部和底部被剪裁。

我正在寻找一个css代码或js来检测resoultion低于600（高度）的客户端，并将调整div高度并添加滚动条。对于所有其他客户，我想保持div高度550px;

Answer 1

以下javascript代码可以帮助您获得屏幕的宽度＆amp;高度：

window.screen.width
window.screen.height

Answer 2

您最好检测浏览器窗口客户端区域而不是屏幕分辨率。

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

Answer 3

我认为最好的方法是使用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>

div css高度调整

3 个答案: