Высота iFrame Auto (CSS)

Ответ 1

У меня была эта же проблема, но я нашел следующее, что отлично работает:

Ключом к созданию адаптивной встраивания YouTube является добавление и элемент контейнера, который позволяет вам фиксировать пропорции. Вы также можете использовать эту технику с большинством других встроенных форм iframe, таких как слайд-шоу.

Вот как выглядит типичный код встраивания YouTube с фиксированной шириной и высотой:

 <iframe width="560" height="315" src="//www.youtube.com/embed/yCOY82UdFrw" 
 frameborder="0" allowfullscreen></iframe>

Было бы неплохо, если бы мы могли просто дать ему 100% ширину, но она не будет работать, так как высота остается фиксированной. Что вам нужно сделать, так это обернуть его в контейнер (обратите внимание на имена классов и удаление ширины и высоты):

 <div class="container">
 <iframe src="//www.youtube.com/embed/yCOY82UdFrw" 
 frameborder="0" allowfullscreen class="video"></iframe>
 </div>

И используйте следующий CSS:

 .container {
    position: relative;
     width: 100%;
     height: 0;
     padding-bottom: 56.25%;
 }
 .video {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
 }

Вот страница, на которой я нашел решение:

https://www.h3xed.com/web-development/how-to-make-a-responsive-100-width-youtube-iframe-embed

В зависимости от вашего соотношения сторон вам, вероятно, потребуется отрегулировать padding-bottom: 56.25%; чтобы получить высоту справа.

Ответ 2

Это мое решение PURE CSS :)

Добавьте, прокручивая "да" на ваш iframe.

<iframe src="your iframe link" width="100%" scrolling="yes" frameborder="0"></iframe>

Хитрость :)

<style>
    html, body, iframe { height: 100%; }
    html { overflow: hidden; }
</style>

Вам не нужно беспокоиться о отзывчивости :)

Ответ 3

Вы должны использовать позицию absolute вместе с нужной высотой. в вашем CSS, выполните следующие действия:

#id-of-iFrame {
    position: absolute;
    height: 100%;
}

Ответ 4

hjpotter92

Добавьте это в свой раздел:

<script>
  function resizeIframe(obj) {
    obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
  }
</script>

И измените ваш iframe на это:

<iframe src="..." frameborder="0" scrolling="no" onload="resizeIframe(this)" />

опубликовано здесь

Однако он использует javascript, но это простой и простой в использовании код, который исправит вашу проблему.

Ответ 5

@SweetSpice, используйте позицию как абсолютную вместо относительной. Он будет работать

#frame{
overflow: hidden;
width: 860px;
height: 100%;
position: absolute;
}

Ответ 6

 <div id="content" >
    <h1>Update Information</h1>
    <div id="support-box">
        <div id="wrapper">
            <iframe name="frame" id="frame" src="http://website.org/update.php" allowtransparency="true" frameborder="0"></iframe>
        </div>
    </div>
  </div>
 #support-box {
        width: 50%;
        float: left;
        display: block;
        height: 20rem; /* is support box height you can change as per your requirement*/
        background-color:#000;
    }
    #wrapper {
        width: 90%;
        display: block;
        position: relative;
        top: 50%;
        transform: translateY(-50%);
         background:#ddd;
       margin:auto;
       height:100px; /* here the height values are automatic you can leave this if you can*/

    }
    #wrapper iframe {
        width: 100%;
        display: block;
        padding:10px;
        margin:auto;
    }

https://jsfiddle.net/umd2ahce/1/

Ответ 7

Вы должны заметить, что тэг div ведет себя как ничто и просто позволяет вам что-то в нем помещать. Это означает, что если вы вставляете абзац со 100 строками текста в тег div, он отображает весь текст, но его высота не изменяется, чтобы содержать весь текст.

Итак, вы должны использовать трюк CSS и HTML для решения этой проблемы. Этот трюк очень прост. вы должны использовать пустой тег div с class= "clear" , а затем вам придется добавить этот класс в свой CSS. Также обратите внимание, что у вас есть #wrap в вашем файле CSS, но у вас нет тега с этим идентификатором. В итоге вы должны изменить свой код на что-то вроде ниже:

Код HTML:

    <!-- Change "id" from "container" to "wrap" -->
    <div id="wrap">    
        <div id="header">
        </div>

        <div id="navigation"> 
            <a href="/" class="navigation">home</a>
            <a href="about.php" class="navigation">about</a>
            <a href="fanlisting.php" class="navigation">fanlisting</a>
            <a href="reasons.php" class="navigation">100 reasons</a>
            <a href="letter.php" class="navigation">letter</a>
        </div>
        <div id="content" >
            <h1>Update Information</h1>
            <iframe name="frame" id="frame" src="http://website.org/update.php" allowtransparency="true" frameborder="0"></iframe>

            <!-- Add this line -->
            <div class="clear"></div>
        </div>
        <div id="footer">
        </div>

        <!-- Add this line -->
        <div class="clear"></div>
    </div>

А также добавьте эту строку в ваш файл CSS:

.clear{ display: block; clear: both;}

Ответ 8

В соответствии с этот пост

Вам нужно добавить модификатор !important css в проценты по высоте.

Надеюсь, что это поможет.