CODEWITHSUNDEEP
javascripthtmlcss
Onome Mine Adamu
Onome Mine Adamu

Reputation: 35

how to make a iframe responsive

I do i make this code work without the scrollbar. and still show all the contents coming from the link in the iframe. 

   <html>
      <head>
        <title>How to make Iframe Responsive</title>
          </head>
             <body>
                <div style="padding-bottom:56.25%; position:relative; display:block; width: 100%">
              <iframe width="100%" height="100%" src="https://www.inflatableoffice.com/quotes/quoteme.php name=Starwalk+of+Dallas%2C+LLC" frameborder="0" allowfullscreen="" style="position:absolute; top:0; left: 0"></iframe>
             </div>
           </body>
      </html>

I want it to display without the sidebars.

Upvotes: 0

Views: 148

Answers (2)

Xavier
Xavier

Reputation: 123

On your wrapper div, add the property overflow:hidden;. This will of course hide vertical and horizontal overflow though. You can control either one with either overflow-x:hidden; or overflow-y:hidden;. Try this:

   <html>
      <head>
        <title>How to make Iframe Responsive</title>
          </head>
             <body>
                <div style="overflow:hidden; padding-bottom:56.25%; position:relative; display:block; width: 100%">
              <iframe width="100%" height="100%" src="https://www.inflatableoffice.com/quotes/quoteme.php name=Starwalk+of+Dallas%2C+LLC" frameborder="0" allowfullscreen="" style="position:absolute; top:0; left: 0"></iframe>
             </div>
           </body>
      </html>

Upvotes: 0

FLUSHER
FLUSHER

Reputation: 277

Add scrolling="no" attribute to the iframe tag.

<iframe scrolling="no" ...></iframe>

Upvotes: 1

Related Questions