div css 高度调整

发布于 2024-08-17 12:45:09 字数 1189 浏览 7 评论 0原文

我的网站中有以下 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 高度保持为 550px；

原文

i have the following div in my website:

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

and this css

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

I have a problem that the div is not fully shown when screen resoultion is lower than 1024x768 (ie 800x600). the top and bottom part of the popup is clipped.

Im looking for a css code or js to detect client with resoultion lower than 600(height) and will resize the div height and add scrollbars.
for all other customers i want to keep the div height 550px;

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

も星光 2024-08-24 12:45:09

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

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

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

回复收藏 0 原文

薄荷梦 2024-08-24 12:45:09

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

window.screen.width
window.screen.height

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

window.screen.width
window.screen.height

回复收藏 0 原文

欲拥i 2024-08-24 12:45:09

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

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>

回复收藏 0 原文

~没有更多了~