I have html like this (index.html):
<html>
<head>
<style>
iframe {
height: 200px;
width: 200px;
border: 0;
}
</style>
</head>
<body>
<iframe src="frame.html" marginheight="0"></iframe>
</body>
</html>
And frame.html
<html>
<head>
<style>
body, html {
height: 100%;
background: #f88;
margin: 0;
box-sizing: border-box;
}
div {
margin-top: 50px;
background: #88f;
}
</style>
</head>
<body>
<div>content</div>
</body>
</html>
Example https://plnkr.co/edit/mlnUS74jrEEsDACQ?preview
The combination of body height 100% and margin somewhere inside the frame causes a scrollbar to appear.
Frame content is located on another domain. I can't modify html code of frame content, but that style is just usual web page.
I need to remove scrollbar from frame, but don't know how.
Cutting off scrollbar with overflow:hidden on element containing frame is not a solution because scrollbar is still there (scrolling works).
There is not a lot of options to try here. I've tried to set style iframe { height:auto }, but that did not work.
If there is no solution please provide credible source.
Upd: please pay attention to the fact, that frame content can't be modified. The scrollbar is inside frame, and while overflow hidden inside frame works, it is not the answer to my question.
If you just want to remove the scroll bars from an iframe and not worry about the content being cut off. Then this can only be done via the HTML attribute scrolling.
<iframe scrolling=“no”>
Technically this was deprecated over a decade ago, and a lot of code validators will flag it. However, there has never been a CSS equivalent added to the spec and all browsers fully support the scrolling attribute.