Question

我正在使用一个框架。我想在网页的其余部分显示框架，而不是浏览器窗口出现的位置。框架尺寸非常小。我需要这个才能做出回应。我需要在代码中做些什么更改才能获得预期的结果。请帮帮我。

https://jsfiddle.net/user1989/2hpwayku/1/

<div style="width:100%; height:100%">
             <div  style="float:left; width:20% height:100%;">      


        <div class="example">
            <h2>Default options</h2>
            <div id="fileTreeDemo_1" class="demo"></div>
        </div>
        </div


        <!-----whole image goes here------------>
        <!--<div style="float:right; width:80%; height:100%" id="filediv">
        <iframe style="overflow:hidden;"></iframe>
        </div>-->
        <div id="demo" onclick="loadDoc()"style="float:right; width:80% height:500%;" ><h2>Let AJAX change this text</h2></div>
         <iframe id="upload_target" name="upload_target" ></iframe>
        </div>

CSS

<style type="text/css">
            BODY,
            HTML {
                padding: 0px;
                margin: 0px;
            }

            H1 {
                font-family: Georgia, serif;
                font-size: 20px;
                font-weight: normal;
            }

            H2 {
                font-family: Georgia, serif;
                font-size: 16px;
                font-weight: normal;
                margin: 0px 0px 10px 0px;
            }

            .example {
                float: left;
                margin: 15px;
            }

            .demo {
                width: 200px;
                height: 600px;
                border-top: solid 1px #BBB;
                border-left: solid 1px #BBB;
                border-bottom: solid 1px #FFF;
                border-right: solid 1px #FFF;
                background: #FFF;
                overflow: scroll;
                padding: 5px;
            }

        </style>

Answer 1

让您的iframe响应的最佳方法是将其设置为宽度100％宽度高度自动。

CSS

iframe{
    width: 100%;
    height: auto;
}

但并非所有iframe宽度100％高度自动运行良好，例如它不适用于youtube iframe视频等。

我建议您使用css技术使其响应。 http://www.smashingmagazine.com/2014/02/making-embedded-content-work-in-responsive-design/

否则，您还可以找到许多可以根据内容使您的iframe响应的Javascript。

https://gist.github.com/aarongustafson/1313517

Answer 2

使用vw css单位设置iframe的宽度和高度，以及视口的百分比

示例：https://jsfiddle.net/2hpwayku/4/

   #upload_target {
      /*border: none;*/
      width: 100vw;
      height:100vw;
    }

或者使用css媒体查询，以便根据窗口大小示例“动态”设置iframe的css：

@media only screen and (max-width: 500px) {
    /*css for your iframe here*/
}

框架未显示预期结果

2 个答案: