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.
Iframe 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.
There is not a lot of options to try here. I’ve tried to set style iframe { height:auto }, but that did not work.