Iframe couldn't scroll to bottom on page zoom in

Viewed 32

I have an iframe on my page which has scrolling disabled. However parent scrollbar couldn't reach the bottom of the page. The iframe content got cutoff. Can I get some help here please ? codepen link: https://codepen.io/zhr1130/pen/oNdzGdz

html,body {
  height:100%;
}

.container {
  position: relative;
  width: 100%;
  overflow: visible;
  height:100%;
}
.responsive-iframe {
  width: 100%;
  height: 100%;
}
<!DOCTYPE html>
<html>
  <body>
  <h1>The iframe element</h1>
  <h2>Responsive Iframe</h2>
  <p>Resize the window to see the effect.</p>
  <div class="container">
    <iframe src="https://www.redfin.com/" title="W3Schools Free Online Web Tutorials"       scrolling="no" width="100%" height="100%" class="responsive-iframe">
    </iframe>
  </div>
  </body>
</html>

1 Answers

Make Iframe height :auto; check following code

html,body {
  height:100%;
}

.container {
  position: relative;
  width: 100%;
  overflow: visible;
  height:100%;
}
.responsive-iframe {
  width: 100%;
  height: auto;
}
<!DOCTYPE html>
<html>
  <body>
  <h1>The iframe element</h1>
  <h2>Responsive Iframe</h2>
  <p>Resize the window to see the effect.</p>
  <div class="container">
    <iframe src="https://www.redfin.com/" title="W3Schools Free Online Web Tutorials"       scrolling="no" width="100%" height="100%" class="responsive-iframe">
    </iframe>
  </div>

Related