1

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.

Community
  • 1
  • 1
Kumar Priyansh
  • 68
  • 2
  • 10

2 Answers2

2

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/

Thomas
  • 171
  • 1
  • 2
  • 5
  • And this time I'm also getting an extra white space on top, which I certainly didn't wanted! – Kumar Priyansh Jun 27 '17 at 20:51
  • And yes, I want to scroll the iframe, so what's the point of adding " scrolling="no" "? – Kumar Priyansh Jun 27 '17 at 20:52
  • The extra white space could be a side effect of some of the css. Which one of the 4 methods above did you use? – Thomas Jun 27 '17 at 21:13
  • As for the scrolling="no" part, if say your iframe content is 2000px tall and the parent window is 1000px tall, you'll get a double scrollbar like in your question. If through javascript you make the iframe as high as its content (2000px) the scrollbar will disapear, and you'll be able to scroll the parent as though you're scrolling the iframe. The scrolling="no" is just to prevent a double scroll bar on the off chance the javascript is off by a few pixels. – Thomas Jun 27 '17 at 21:16
  • I really don't know the exact height of my iframe as the contents of the webpage are always changing. Well I figured out another way, not to hide the scrollbar, but the set the width of the scrollbar in iframe so thin that it is barely visible. Well, still thanks for your efforts! – Kumar Priyansh Jun 28 '17 at 13:44
  • Glad to hear you figured out a way that works for you – Thomas Jun 30 '17 at 07:34
1

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

Sathvik
  • 34
  • 1
  • 3