jQuery UI對話框中有不需要的垂直滾動條在FF5

我試圖啓動一個包含一個非常簡單的HTML頁面的iframe的jQuery UI對話框。該頁面不應該需要滾動條。在IE9中，我沒有得到滾動條，但在FF5中，我得到了一個垂直滾動條。下面是一個啓動對話的頁面：jQuery UI對話框中有不需要的垂直滾動條在FF5

<!DOCTYPE html> 
<html> 
<head> 
    <title></title> 
    <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" /> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script> 
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/jquery-ui.min.js" type="text/javascript"></script> 
    <style type="text/css"> 
     iframe {width:100%; height:100%; border:0;} 
    </style> 
</head> 
<body> 
    <a href="" onclick="return showDialog()">Show the Dialog</a> 
    <div id="dlg"></div> 

    <script type="text/javascript"> 
     $("#dlg").dialog({ autoOpen: false, modal: true, width:400, height:300, resizable:false, title: "YO"}); 

     function showDialog() 
     { 
      $("#dlg").html('<iframe src="frame.htm" />').dialog("open"); 
      return false; 
     } 
    </script> 
</body> 
</html>

和這裏的簡單frame.htm頁面，該IFrame顯示：

<!DOCTYPE html> 
<html> 
<head> 
    <title></title> 
    <style type="text/css"> 
     * {margin:0; padding:0;} 
     body { background:#EFF;} 
    </style> 
</head> 
<body> 
<div> 
    <p>I'm a paragraph</p> 
    <div style="height:2px; background:#000;"></div> 
</div> 
</body> 
</html>

？

到目前爲止最好的我已經能夠做的就是禁用滾動完全通過改變jQuery UI的CSS是這樣的：

.ui-dialog .ui-dialog-content { overflow: hidden; }

但我希望能夠使用溢出：汽車因爲如果內容實際上保證一個滾動條。非常感謝您的幫助。

來源

2011-08-01 C.J.

一旦將iframe設置爲height: 95%，滾動條就會消失。至於爲何對話框的行爲就像是，我將不得不進一步調查，但它確實在目前

它似乎是在對話框，而不是在iframe本身

來源

2011-08-01 13:46:07 Semyazas

有趣的是不工作造成的工作。不確定滾動條是否在iframe或其內容上。無論哪種方式，我寧願有一個滾動條，如果iframe的內容需要一個，但沒有一個，如果它不。 –

'$（element）[0] .scrollHeight'獲取內容的實際高度。如果您檢查該視圖是否大於視口，您可以根據需要啓用和禁用滾動條。 – Semyazas

在這種情況下，我也在考慮將iFrame作爲視口，因爲它顯示的是完整頁面。至於仍然存在的滾動條，我試圖重現 – Semyazas

jQuery UI對話框中有不需要的垂直滾動條在FF5

回答

相關問題