CODEWITHSUNDEEP
javascriptjqueryhtmlcssiframe
Robert Crenshaw
Robert Crenshaw

Reputation: 73

Is there a way to prevent double scrolling bars using iframe

This question appears to be a duplicate that was unanswered or similar to HTML iframe - Double Scrolling Bars.

I would like to know how to remove the scrolling bar of the iframe and use the browser's scrolling bar to navigate the page up and down?

<html>
    <body style="margin: 0; padding: 0; border: 0; outline: 0;">
        <div style="width:100%;height:50px; background-color:red;"></div>
        <iframe frameBorder="0" style="width:100%;height:100%;" src="http://www.mynewplace.com/apartments-for-rent/st-paul-mn"></iframe>
    </body>
</html>

enter image description here

Upvotes: 0

Views: 839

Answers (3)

Ying Yi
Ying Yi

Reputation: 782

try to set height by jvascript, example:

<iframe id="test" FRAMEBORDER=0
  src="form.jsp"
  style="width: 100%"
  onload="this.height=document.body.scrollHeight">
</iframe>

Upvotes: 0

G.L.P
G.L.P

Reputation: 7217

You can try scrolling="no" for iframe

iframe { overflow:hidden;}

HTML:

<iframe frameBorder="0" style="width:100%;height:100%;" scrolling="no" src="http://www.mynewplace.com/apartments-for-rent/st-paul-mn"> 
  </iframe>

Upvotes: 1

Zivko
Zivko

Reputation: 377

Try to set up height of all parent element to 100% (so HTML and BODY tag) and then put height of iframe to calc(100% - 50px)

html, body{height: 100%;}
<html>

<body style="margin: 0; padding: 0; border: 0; outline: 0;">
  <div style="width:100%;height:50px; background-color:red;"></div>
  <iframe frameBorder="0" style="width:100%;height:calc(100% - 50px);" src="http://www.mynewplace.com/apartments-for-rent/st-paul-mn">
  </iframe>
</body>

</html>

Upvotes: 0

Related Questions