0

First of all, using Angular 4, bootstrap 3, html 5.

Right now, I have an iframe <iframe src="http://test.test"></iframe> with the style 

body {
    margin: 0;
}
iframe {
    display: block;
    border: none;
    height: 100vh;
    width: 100%;
}

When the html pops, the height is correct (and I have no scrollbar), but when the content of the iframe page changes, a scroll bar appears. My objective is to not have the scrollbar in the iframe, NEVER.

EDIT1: Already tried overflow: hidden;, does not work.

EDIT2: I do not want content to spill onto the parent page.

Noki
  • 870
  • 10
  • 22
  • 3
    Possible duplicate of [Is there a way to have content from an IFRAME overflow onto the parent frame?](https://stackoverflow.com/questions/176572/is-there-a-way-to-have-content-from-an-iframe-overflow-onto-the-parent-frame) – Shabbir Dhangot Jan 25 '18 at 20:11
  • 1
    I don't see how this is related to the other question. This one is about preventing scrollbars from appearing in an iframe; it doesn't look like OP wants the content to spill onto the parent page. – Clément Jan 25 '18 at 23:29
  • Exactly, but maybe the first answer is related to this post. – Noki Jan 26 '18 at 07:42

2 Answers2

1

I had a similar issue and I add a js script to take the full innerHeight, try this, you can also implement it onload of the window (you can use id, but i always show class example because it can be used multiple times) :

<script>
    window.onresize = function() {
        var frame = document.getElementByClassName('myFrameClass')[0];
        frame.style.height = window.innerHeight;
    }
</script>

EDIT : must have scrolling="no" on the iframe tag, and the overflow: hidden css rule for inner content

andrea06590
  • 1,259
  • 3
  • 10
  • 22
0

Try adding overflow: hidden to your styles.

Christian
  • 2,676
  • 3
  • 15
  • 25