How to Remove Double Scroll Bar When Using iFrame?

[RyanHayes]

We are using OpenStax textbooks in many of courses. We are also trying to keep the students in Canvas so we embedded the chapters of the OpenStax textbook in pages. The issue us that since the textbooks chapters are so long, we have a scroll bar inside the iFrame plus an additional scroll bar for the browser itself. This is quite annoying and not user friendly. 

I have tried this in the HTML editor:

Top of Page

<style>

iframe {overflow:hidden}

</style>

Add the following code to the iFrame right before the closing tag:

scrolling="no"

That does remove the scrollbar, but the iframe vertical height is too short and cuts off content. I tried changing the iframe height to 100%, but that actually made the iFrame window really small and cut off almost all content.

[JeffCampbell]

I had occasionally seen this as well. Out of curiosity, is the iFrame content at the end of your page (as in, nothing else following it)? If so, try something really odd. Add <p>&nbsp;</p> on the next line after the closing tag of the iFrame. Oddly, this seemed to fix the issue when I had something at the end causing a second scroll bar.