Как сделать адаптивную высоту iFrame? - PullRequest
Новая
       18

Как сделать адаптивную высоту iFrame?

0 голосов
/ 17 января 2020

Я пытаюсь сделать iFrame адаптивным в соответствии с размером окна. Я почти сделал, но в режиме телефона он ломается, понятия не имею, почему. Я использовал много примеров того, как выровнять iFrame, но никто не работал хорошо. Кроме того, пробел, который вы видите на скриншоте ниже, не появляется в html или css, и кажется, что это пространство вне тела или html вообще. Есть идеи, что это может быть? Я использую базовое веб-приложение asp. net с бритвенными страницами. iFrame находится внутри тега div, что внутри основного тега enter image description here

Вот мой css код 

.AdaptiveIframe iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  max-height: 100%;
}

.AdaptiveIframe {
  position: relative;
  padding-bottom: 100%;
  height: 100%;
  width: 100%;
}

html

<main role="main">
    <div class="AdaptiveIframe">
        <iframe frameborder="0">Oops! Your browser does not support iframe.</iframe>
    </div>
    @RenderBody()
</main>

1 Ответ

0 голосов
/ 17 января 2020

Я неожиданно нашел ответ. Вот мой css код. Но я буду рад любым предложениям, если есть что исправить. 

.AdaptiveIframe iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 150%;
  height: 150%;
}

.AdaptiveIframe {
  position: relative;
  padding-bottom: 150%;
}
...