How to set the iframe height & width to 100%

后端 未结 7 1450
礼貌的吻别
礼貌的吻别 2021-01-04 04:19

I am in need of doing the following:

  1. I have a header content which is 70px and an iframe with a wrapper. The height & width of the iframe has to be set to
相关标签:
7条回答
  • 2021-01-04 05:16

    Normally you set and width and height for iframes. If the content inside is bigger, scrollbars have to suffice. The script below attempts to fix that by dynamically resizing the iframe to fit the content it loads.

    you can use this function to set auto hight using jquery /javascript

    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script>
    
         $(function(){
    
                var iFrames = $('iframe');
    
                function iResize() {
    
                    for (var i = 0, j = iFrames.length; i < j; i++) {
                      iFrames[i].style.height = iFrames[i].contentWindow.document.body.offsetHeight + 'px';}
                    }
    
                    if ($.browser.safari || $.browser.opera) { 
    
                       iFrames.load(function(){
                           setTimeout(iResize, 0);
                       });
    
                       for (var i = 0, j = iFrames.length; i < j; i++) {
                            var iSource = iFrames[i].src;
                            iFrames[i].src = '';
                            iFrames[i].src = iSource;
                       }
    
                    } else {
                       iFrames.load(function() { 
                           this.style.height = this.contentWindow.document.body.offsetHeight + 'px';
                       });
                    }
    
                });
    </script>
    

    And your Iframe html like this

    <iframe  src="http://www.google.com"  class="iframe" scrolling="no" frameborder="0"></iframe>
    
    0 讨论(0)
提交回复
热议问题