Question 398412 in Html Question posted in
Some basic documentation can be found here.

Html – Remove scrollbar inside iframe with margin

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.

There is not a lot of options to try here. I’ve tried to set style iframe { height:auto }, but that did not work.

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.

Tags:

2

Answers


  1. 0

    Got it! Try this quick fix:

    Add to your iframe style:

    overflow: hidden;

    This should kill that annoying scrollbar. If it doesn’t work, holler back and we’ll brainstorm more!

    Login or Signup to reply.
  2. 0

    @Anastasios3 has the right idea however adding that code to the iframe style on index.html will not work.

    However, you can add it to the style of frame.html as follows:

    <html>

<head>
  <style>
    body,
    html {
      height: 100%;
      background: #f88;
      margin: 0;
      box-sizing: border-box;
      overflow: hidden;
    }
    
    div {
      margin-top: 50px;
      background: #88f;
    }
  </style>
</head>

<body>
  <div>content</div>
</body>

</html>

    https://plnkr.co/edit/gmrez9PTLAjh8YLl?preview

    This will make sure that when the page shows up in an iframe, it will not overflow.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search