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

我有一個問題，當屏幕resoultion低於股利未完全顯示1024x768（即800x600）。彈出窗口的頂部和底部將被剪切。

我正在尋找一個CSS代碼或js來檢測客戶端的resoultion低於600（高度），並將調整div高度並添加滾動條。爲所有其他客戶我想保持div高度550px;

來源

2010-01-13 dan

溢出：汽車;最大高度：90％;最大寬度：90％;將解決大小和滾動條 - 但不是中心，這取決於像素大小。 – Quentin 2010-01-13 12:57:12

你會好起來的檢測瀏覽器窗口的客戶區，而不是屏幕分辨率。

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

下面的JavaScript代碼可以幫助你得到屏幕的寬度&高度：

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編寫它，你可以使用@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>

來源

2010-01-13 12:59:43 Daan

DIV + CSS高度調節

回答

相關問題