缺少100％固定寬度/高度iFrame的滾動條

Question

我想在最大化（寬度和高度= 100％）的iframe中加載響應站點，然后將寬度和高度從100％固定為相應的像素值，因此，如果外部窗口縮小，響應站點將停留在先前的最大尺寸。

以下代碼有效，但是如果您將窗口縮小，則沒有滾動條。

如何使滾動條自動顯示，例如overflow：auto？ 我確實需要100％的初始尺寸，因為我的自適應iframe內容很舊，並且在調整大小時會出現問題，因此以后無法調整iframe的大小。

 <!DOCTYPE html> <html> <head> <style> * { padding: 0; margin: 0; } #wrapper { position:fixed; top:0; left:0; width:100%; height:100%; } #wrapper iframe { width:100%; height:100%; border:0 none; } </style> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script language="JavaScript" type="text/JavaScript"> <!-- $( document ).ready(function() { $('#wrapper').width($('#wrapper').outerWidth()); $('#wrapper').height($('#wrapper').outerHeight()); }); //--> </script> </head> <body> <div id="wrapper"> <iframe id="myFrame" src="https://getbootstrap.com/examples/grid/" frameborder="0"> <p>Your browser does not support iframes.</p> </iframe> </div> </body> </html>

Answer 1

我自己找到了解決方案。 訣竅是將body和html設置為100％的高度，刪除包裝器的position：fixed，然后將“ display：block”添加到iframe中。 如果不使用display：block，則iframe的末尾將有少量空間，因此垂直滾動條始終可見。

body, html {
    width: 100%;
    height: 100%;
}

* {
    padding: 0px;
    margin: 0px;    
}

#wrapper { width:100%; height:100%; }
#wrapper iframe { display: block; width:100%; height:100%; border:0 none;}

缺少100％固定寬度/高度iFrame的滾動條

問題描述

1 個解決方案

解決方案1
0 2015-10-23 13:10:03

缺少100％固定寬度/高度iFrame的滾動條

問題描述

1 個解決方案

解決方案1 0 2015-10-23 13:10:03

解決方案1
0 2015-10-23 13:10:03