div css高度调整答案

【问题标题】：div css height adjustingdiv css高度调整
【发布时间】：2010-01-13 20:59:43
【问题描述】：

我的网站中有以下 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 来检测分辨率低于 600（高度）的客户端，并将调整 div 高度并添加滚动条。对于所有其他客户，我希望将 div 高度保持为 550 像素；

【问题讨论】：

溢出：自动；最大高度：90%；最大宽度：90%；将解决大小和滚动条问题——但不解决取决于像素大小的居中问题。

标签： html css height

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

以下 javascript 代码可以帮助您获取屏幕的宽度和高度：

window.screen.width
window.screen.height

【讨论】：

【解决方案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>

【讨论】：