Question

我需要做以下事情：

我有一个70px的标题内容和一个带有包装器的iframe。高度和高度如果没有，iframe的宽度必须设置为100％滚动，除了为身体而来的滚动内容已加载，内容的大小更多。
iframe的内容是来自同一域的另一个HTML页面。 iframe还需要根据响应式HTML进行扩展页。

任何人都可以帮忙吗？

我无法使用的东西：

位置：固定;（主要是由于我用于侧边栏的脚本

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Bus Management System</title>
    <!-- Viewport meta tag to prevent iPhone from scaling our page -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">


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


  </head>

    <style type="text/css" media="all">
        html, body, iframe {width:100%; height:100%;box-sizing:border-box; margin:0; padding:0; border:0;}
        body {border:4px solid green;}
        iframe {border:6px solid red;width:100%; height:100%;display:block;}
        #wrapper {border:2px solid blue; width:100%; height:100%;}

    </style>
    <body>
        <div style="height:50px; background-color:#000; color:#fff;">Header</div>

            <iframe src="http://www.google.com" style="width:100%; height:100%;" onLoad="calcHeight();"></iframe>

    </body>
</html>

Answer 1

仅针对100％宽度和高度的CSS解决方案

HTML

<div class="container">
    <div class="h_iframe">
        <iframe  src="//www.youtube.com/embed/9KunP3sZyI0" frameborder="0" allowfullscreen></iframe>
    </div>
</div>

CSS

html,body {
    height:100%;
}
.h_iframe iframe {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
}

DEMO

没有位置：绝对

CSS

html,body        {height:100%;}
.h_iframe iframe {width:100%; height:100%;}
.h_iframe {
    height: 100%;
}

DEMO 2

最后这里是破解

现代浏览器现在支持：

width: calc(100% - 70px);

CSS

html,body {
    height:100%; 
    margin-top:0; 
    margin-bottom:0;
}
.h_iframe iframe {
    width:100%;
    height:calc(100% - 75px);
}
.h_iframe {
    height: 100%;
}
.element{
    width:100%;
    height:70px;
    background:red;
}

HTML

<div class="container">
    <div class="element">here it goes</div>
    <div class="h_iframe">
        <iframe  src="//www.youtube.com/embed/9KunP3sZyI0" frameborder="0" allowfullscreen></iframe>
    </div>
</div>

Final DEMO

Answer 2

通常你设置iframe的宽度和高度。如果里面的内容更大，滚动条必须足够。下面的脚本尝试通过动态调整iframe大小来适应它加载的内容来解决这个问题。

您可以使用此功能使用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>

你的iframe html就像这样

<iframe  src="http://www.google.com"  class="iframe" scrolling="no" frameborder="0"></iframe>

Answer 3

简单干净。 jQuery是必需的。资料来源：https://stackoverflow.com/a/3940802

修改了一下

                function iframeHeight() {
                    var newHeight = $(window).height();
                    var newWidth = $(window).width();
                    var buffer = 100;     // space required for any other elements on the page
                    var newIframeHeight = newHeight - buffer;

                    $('iframe.fop').css('height',newIframeHeight).css('width',newWidth);    //this will aply to all iframes on the page, so you may want to make your jquery selector more specific.
                }

                // When DOM ready
                $(function() {
                    window.onresize = iframeHeight;
                    iframeHeight();
                });

<iframe src="" target="_parent" width="100%" height="100%" class="fop"></iframe>

Answer 4

大众汽车可以正常工作（已在Chrome和Firefox上测试）

iframe{
 width:100vw;
}

Answer 5

您可以尝试执行以下操作：

# Import some stuff
import matplotlib.pyplot as plt
import matplotlib.dates as mdates

from datetime import datetime
import pathlib
from pathlib import Path
import moviepy.editor as mpy



# Define Input
x = [2.803480599999999, 5.5502475000000056, 6.984381300000002, 4.115224099999998, 5.746583699999995, 8.971469500000019,
     12.028179500000032, 13.451193300000014, 12.457393999999972, 12.027555199999998, 16.077930800000015,
     5.021229700000006, 11.206380399999999, 7.903262600000004, 11.98195070000001, 12.21701, 10.35045,
     10.231890000000002]

y = [11.961321698938578, 5.218986480632915, 5.211628408660906, 4.847852635777481, 4.936266162218553, 5.233256380128127,
     5.441388698929861, 5.461721129728066, 5.722170570613203, 5.2698434785261545, 5.645419662253215, 4.617062894639794,
     4.973357261130752, 5.906843248930297, 5.256517482861392, 5.537361432952908, 5.339542403148332, 5.376979880224148]

t_string = ['2019-10-7', '2019-10-13', '2019-11-10', '2019-11-16', '2019-11-17', '2019-11-23', '2019-11-24',
            '2019-11-27', '2019-12-1', '2019-12-4', '2019-12-8', '2019-12-21', '2019-12-23', '2019-12-25', '2019-12-27',
            '2020-1-2', '2020-1-5', '2020-1-9']

# Define a function to get the datafiles with a certain suffix in a path
def getfile_UI(file_directory, file_suffix):

    from glob import glob
    path_to_search = file_directory / file_suffix
    filenames = glob(str(path_to_search))

    return filenames


# Start of script/calculations
t = [mdates.date2num(datetime.strptime(i, "%Y-%m-%d")) for i in t_string]

workingdirectory_projectfolder = Path.cwd().parent

my_dpi = 75

for index, entry in enumerate(t_string):
    fig = plt.figure(figsize=(480 / my_dpi, 480 / my_dpi), dpi=my_dpi)
    sc = plt.scatter(x[0:index + 1],
                     y[0:index + 1],
                     c=t[0:index + 1])
    plt.xlim(0, 20)
    plt.ylim(4, 7)
    plt.title(entry)

    plt.xlabel("Distace [km]")
    plt.ylabel("Pace [min/km]")

    loc = mdates.AutoDateLocator()
    fig.colorbar(sc, ticks=loc,
                 format=mdates.AutoDateFormatter(loc))

    filename = 'png_' + str(index) + '.png'
    new_dir = workingdirectory_projectfolder /  "type 3 gif"
    pathlib.Path(new_dir).mkdir(exist_ok=True)

    plt.savefig(workingdirectory_projectfolder / "type 3 gif" / filename, dpi=96)
    plt.gca()

# Make a GIF from all png files
#       http://superfluoussextant.com/making-gifs-with-python.html
fps = 10
gif_name = str(fps) + " fps_""type3_"
workingdirectory_projectfolder = Path.cwd().parent
gif_path = workingdirectory_projectfolder / "type 3 gif" / gif_name

filenamelist_path = workingdirectory_projectfolder / "type 3 gif"
filenamelist_png = getfile_UI(filenamelist_path, "*.png")

list.sort(filenamelist_png, key=lambda x: int(
    x.split('_')[1].split('.png')[0]))  # Sort the images by #, this may need to be tweaked for your use case

clip = mpy.ImageSequenceClip(filenamelist_png, fps=fps)
clip.write_gif('{}.gif'.format(gif_path), fps=fps)

Answer 6

通过计算9/16-0.5625，我从YouTube获得了比例为6:19的视频帧->。乘以95vw（也可以设置为100vW）。

尽最大努力保持视频比例不变。

@media all and (max-width: 730px) {
    iframe{
        width: 95vw !important;
        height: calc(95vw*0.56) !important;
    }
}
    iframe{
    margin:auto;
    display:block;
    width:685px;
    height:385px;
}

    <iframe id="video" allowfullscreen src="https://www.youtube.com/embed/5Mdy8nBBbQQ?autoplay=1"></iframe>

Answer 7

这对我有用

＆＃13;

<iframe frameborder="0" height="490" scrolling="no" src="" width="735"></iframe>

＆＃13;

如何设置iframe高度＆amp;宽度为100％

7 个答案: