рама не покажет ожидаемые результаты

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/

В противном случае вы также можете найти много Javascript, которые могут сделать ваш iframe отзывчивым в соответствии с содержанием.

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

Answer 2

Используйте vw CSS модуль для того, чтобы установить ширину и высоту фрейма за процент от вида порт

Пример: https://jsfiddle.net/2hpwayku/4/

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

Или использовать CSS медиа-запрос для того чтобы установить css для вашего iframe «динамически» на основе примера размера окна:

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