0

I have a top navigator, and an iframe below the navigator which load the content. The layout is kind of like

<body>
<div style="text-align:middle">
    <div id="nav"></div>
    <iframe></iframe>
</div>
</body>

The navigator is set to fixed width to match the width of iframe content which is not full screen width. So that the navigator and the iframe are aligned at both sides.

But when iframe's height grows beyond the screen, the vertical scroll bar for the iframe shows up and the the iframe becomes a little left(no longer in the absolute horizontal position) and not aligned with the top navigator.

How could I make the iframe always showing at the center even with a vertical bar?

I think this should be a common issue but haven't searched out a similar question here...

Edit 1: Attach a full sample here to illustrate this question.Here index is the main page, iframe2.html is a frame without vertical bar and iframe.html is the one with a bar. The blue block(iframe) is not aligned with the other two:

index.html:

 <html>
<head></head>
<style type="text/css">
iframe {
    width : 100%;
    padding : 0;
    margin: 0 auto;
    display : block;
}
</style>
<body>
    <div style="text-align:center;margin:0 auto;overflow:hidden">
    <div style="background-color:red;width:900px;margin:0 auto;padding:8px 0 8px 0">
        <span>test</span>
    </div>
    <iframe frameborder="0" scrolling="auto" src="iframe2.html" style="height:200px;"></iframe>
    <iframe frameborder="0" scrolling="auto" src="iframe.html" style="height:100%;"></iframe>
    </div>
</body>
</html>

iframe2.html

<html>
<head></head>
<body style="padding:0px;margin:0px;">
    <div style="width:900px;height:190px;background-color:green;margin:0 auto"></div>
</body>
</html>

iframe.html

<html>
<head></head>
<body style="padding:0px;margin:0px;overflow-y:scroll">
    <div style="width:900px;height:2000px;background-color:blue;margin:0 auto"></div>
</body>
</html>

Result:

enter image description here

mosakashaka
  • 535
  • 1
  • 6
  • 19
  • use css "margin: 0 auto;" – AmanKumar Jun 29 '16 at 12:49
  • if hiding scrollbar is option try this http://stackoverflow.com/questions/7403440/iframe-hide-scroll-bars-but-still-be-able-to-scroll-with-mouse-wheel?rq=1 or you can use custom scrollbar http://stackoverflow.com/questions/22618452/custom-scrollbar-using-jquery-for-iframe-with-customer-url – Jakob Jun 29 '16 at 12:51
  • Perhaps always force scrollbar even when it is not needed, and then align the navbar to that? `body { overflow-y: scroll; }` – Callan Heard Jun 29 '16 at 12:55
  • @AmanKumar Tried but seems it makes no differences... I think it in some way do the same as text-align... – mosakashaka Jun 29 '16 at 13:34
  • @jakob I think i still need an indication for scrolling, so not to hide the scroll bar. The custom scrollbar question doesn't mention much about whether it'll influence the center position or not, but I think I'll try find out.. Thank you – mosakashaka Jun 29 '16 at 14:02
  • @Callan Heard thanks. I think always showing the scroll bar seems to be acceptable, do you have any suggestions on how can i gracefully align the navigator to that? or should I ask another question about it.. – mosakashaka Jun 29 '16 at 14:06
  • Did your try , it would be good if you could add working example. – frnt Jun 29 '16 at 15:25
  • @fmt hi, the working sample is attached at the end of the question( code and screenshot). align middle seems make no difference... – mosakashaka Jun 29 '16 at 23:16

2 Answers2

1

You can center the iframe using css,

iframe {
  margin: 0 auto;
  display: block;
}

See the example: https://jsfiddle.net/bnby6umd/

Jerad Rutnam
  • 1,536
  • 1
  • 14
  • 29
  • Hello, sorry that i don't know how to use jsifddle to load iframes... but I've edited my question and add the sample code to illustrate this question. with `margin:0 auto;display:block`, it still not work properly.... Or do I miss anything – mosakashaka Jun 29 '16 at 14:42
0

After my comment (as this seemed to help you with the edits you have made):

Perhaps always force scrollbar even when it is not needed, and then align the navbar to that? body { overflow-y: scroll; }

and further to your reply, I would suggest the simplest way to keep the elements aligned would be to ensure they are the same width. As you are now forcing the scrollbar permanently, perhaps the easiest way to do this would be to add to the width of the first element, or remove from the width of the second, to account for the width of the scrollbar.

Although this would be very browser dependant as each browser may use a slightly different width scrollbar, as per this article, I suggest altering whichever width by 17 pixels, and see if that achieves the effect you are after.

UPDATE

Apologies, I misunderstood what you were after. The reason you are experiencing this issue is because you are getting confused between styling the iframe element and the content within the document it is displaying.

By setting the <div> within the 'iframe.html' files to a width of 900px, you are only styling the content being displayed. The 'outer' iframe element is being styled to 100% width, and so will span the full width of the window. Because of this, the centered content will be offset by the horizontal scrollbar, giving the appearance of not being aligned - however the actual iframe is not moving at all.

It is only possible to align the edges of two elements, regardless of their position, is for them to have the same width (obviously, as otherwise the edges could never line up). To do this, style the <iframe> to be of the correct width - what you do with the content behind that is then unimportant. This way, the width of the scrollbar will then be taken into account automatically, and the total width adjusted accordingly.

Basically, in the styling for the iframe, change width: 100%; to width: 900px;.

Here's a Fiddle.

I've tried to create a diagram to help explain:

iframes

On the left the content is offset by the scrollbar, whereas on the right, the element is styled and centered, not the content, and so the scrollbar just overlaps the content.

You may also like to take a look at some documentation and tutorials for iframes.

Callan Heard
  • 727
  • 1
  • 8
  • 18
  • hi, could you be so kind please explain more about how `add to the width of the first element`. I've attached a sample code at the end of the question, how should I modify it..... I think they are already the same width by now, but their horizontal position are different... – mosakashaka Jun 29 '16 at 23:19
  • In 'iframe.html' change "width:900px" to "width:883px". I will add some more info to my answer to better explain when I'm at my laptop! – Callan Heard Jun 30 '16 at 08:07
  • Thanks for this detailed explanation, sorry that I'm asking the wrong question. So the iframe is already at the horizontal center position but this position is not the same with its parent's center... I understand your approach to align iframe with navigator, but is it possible to align these elements even with a 100% width iframe? Because a vertical bar displayed in the center of the screen is not so beautiful... I'm not sure if I should ask another question about it or should I edit my question?Thank you. – mosakashaka Jul 01 '16 at 08:15
  • @mosakashaka ah I see, no need to create another question or edit - if you require the iframe widths to be 100% then I suggest the only way to align them would be to always force the scroll bar on both iframes, and then move the top bar to account for the scroll bar; because the content of the iframe will always be centred relative to the iframe. Try adding a right margin to the top bar with a width of 17 pixels – Callan Heard Jul 01 '16 at 13:32
  • Thank you. If I already set the margin to auto for the top bar, how can I add another 17px offset to that? It seems I could only set the position relative to the left edge or the right edge of the window, but not to the center of the window.... maybe only with js? – mosakashaka Jul 02 '16 at 12:47
  • On, I come up with an idea that add a transparent border(17px) to the right side of a fixed-size image as the background of the navigator, and set the margin to auto, this way I could achieve your proposal of `adding a right margin to the top bar with a width of 17 pixels`, not sure if there's a better solution... – mosakashaka Jul 02 '16 at 12:51
  • Great, glad I could help! – Callan Heard Jul 02 '16 at 13:13