CODEWITHSUNDEEP
javascriptjqueryhtmlcssiframe
Conrad Reeves
Conrad Reeves

Reputation: 78

Hiding iframe Scrollbar : Nothing Works

I have tried almost anything on the internet to remove scrollbar from my HTML Page. I am continuously getting dual scrollbars, which I don't want. I have made a page and have a menu bar on the top and want a page to be embeded below the menu bar. But all I get is an output like this: Take a look at this picture and notice the dual scrollbar. I have tried the following code in my html:

<style>
#container{width: 100%; height: 100%; overflow: hidden;}
  iframe{width: 100%; height: 100%; border: 0;}
  body {
      margin: 0;
  }
</style>
<body>
<div id="container">
  <iframe src="http://myurlhere.somedomain"></iframe>
</div>
</body>

Any ideas what should I do?

PS: I want to retain the body scrollbar but remove the iframe scrollbar and also I want results in full browser width and height. Please don't post answers like

<iframe src="url" scrolling="no"></iframe>

or

frameborder="0"

or

iframe 
  {
  overflow-x:hidden;
  overflow-Y:hidden;
  }

Because all these methods DON'T WORK!

I need to scroll the iframe but without scrollbar. Hope I'm clear enough with the question.

Upvotes: 1

Views: 1044

Answers (2)

Thomas
Thomas

Reputation: 171

From your screenshot it looks like you're using a top frame which includes a menu, and load the content in an iframe at 100% height.

The reason you're getting a double scrollbar is because the 100% height does not subtract the height of the menu.

Since the parent window won't know the height of the iframe contents (unless you use quite some javascript) you're better off making sure the parent window won't show the scrollbar and use the scrollbar from the iframe. This does have the effect of leaving the menu always at the top of the window, which may or may not be desired.

Depending on the browsers you'd like to support there are a few css only methods you could try.

(Edit: clearly labelled the different methods)

Method 1: css flex

The cleanest way to achieve this is using display: flex. By giving your body a display: flex; flex-direction: column and your #container a flex: 1 makes the #container fill the remaining height after the header. Example: https://jsfiddle.net/Ldyb418y/

Method 2: css calc

If the header has a fixed height, you could use css's calc() to make the height 100% - the height of the header: #container { width: 100%; height: calc(100% - 30px); overflow: hidden; }. Example: https://jsfiddle.net/jgdyqe1t/

Method 3: box-sizing and padding

If for some reason you can't or won't use calc and your header has a fixed height, you can use #container { width: 100%; height: 100%; overflo: hidden; box-sizing: border-box; padding-top: 30px; } in combination with position: absolute on the header. This places the header on the top padding of the iframe. Example: https://jsfiddle.net/dtk9ed8f/

Method 4: set iframe height from javascript

If you don't want the menu to always stay on top, you're stuck with using javascript. In this case you need to make the iframe tall enough to fit all the contents. However that means you will need to access the iframe's content in some way to get its height. This will only work if the parent frame and the iframe are on the same domain.

Using the method as described by hjpotter92 in Make iframe automatically adjust height according to the contents without using scrollbar?

Snipped from the post above:

<script>
  function resizeIframe(obj) {
    obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
  }
</script>

And on the iframe:

<iframe src="..." frameborder="0" scrolling="no" onload="resizeIframe(this)" />

You will need to remove the overflow: hidden from your #container. Example: https://jsfiddle.net/wbznd35n/

Upvotes: 2

Sathvik
Sathvik

Reputation: 34

Try using iframe resizer https://github.com/davidjbradshaw/iframe-resizer It hides iframe scrollbar and adjusts it based on parent window size.

Upvotes: 1

Related Questions