title: How to make adaptive iFrame height?
body: <p>I'm trying to make iFrame adaptive according to window size. I almost done but in phone mode it's breaking, no idea why. I used a lot of examples about how to align iFrame, but no one worked well. Also, a space what you can see on screenshot below doesn't appears in html or css, and it seems like this space is out of body or html, at all. Any ideas what could that be? I'm using asp.net core web application with razor pages. iFrame is inside div tag what's inside main tag
  <a href="https://i.stack.imgur.com/FIp73.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/FIp73.png" alt="enter image description here"></a></p>
  
  <p>Here's my css code</p>
  
  <pre><code>.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%;
  }
  </code></pre>
  
  <p>html</p>
  
  <pre><code>&lt;main role="main"&gt;
      &lt;div class="AdaptiveIframe"&gt;
          &lt;iframe frameborder="0"&gt;Oops! Your browser does not support iframe.&lt;/iframe&gt;
      &lt;/div&gt;
      @RenderBody()
  &lt;/main&gt;
  </code></pre>