positioning content of an iframe within a containing div

问题

I've got a page which I need to serve via an iframe, but I need to only display part of the page, not the whole thing.

My current code is:

<div style="display:block;overflow:hidden;width:500px;height:350px;">
<iframe height="350px" scrolling="no"
src="http://my/page/i/want/to/show/part/of/here/" width="500px"></iframe></div>

I thought that the best option would be to serve the iframe within a containing div that has "overflow:hidden" so that it acts like a picture frame. That works, but the problem is that the content I want to show is in the middle of the iframe page and the div is always assuming that 0,0 is the start of the frame. I need to position the iframe so that the div is exactly over the part of the page I want to be visible.

Can I do this?

回答1:

Use negative values for margin-top and margin-left to position the iframe. Look at the code below:

<div style="display:block;overflow:hidden;width:500px;height:350px;">
<iframe style="margin-top:-100px;margin-left:-100px" height="350px" scrolling="no"
src="http://my/page/i/want/to/show/part/of/here/" width="500px"></iframe></div>

回答2:

In the content to appear within the iframe, if you can set an element with an id that marks the very top of the portion of content you want to peak through, then you can set the iframe's src attribute with that anchor on the url

iframe content's HTML:

[a bunch of markup/stuff that you don't want to show]
....
<div id="topOfVisibleArea"></div>

[more markup]

iframe tag:

<iframe height="350px" scrolling="no" 
src="http://my/page/i/want/to/show/part/of/here/#topOfVisibleArea" 
width="500px"></iframe>

UPDATE -- BETTER APPROACH:

Or you can just use absolute positioning on the iframe within the div. You'll need the iframe's height and width to be wider and taller in than the window you're fitting it in to accomodate the offsets.

See this example: http://jsfiddle.net/sNSMw/

回答3:

<iframe name="itunes" src="http://itunes.apple.com/us/album/threads/id509846713&quot; frameborder="0" width="500" height="600" onload="window.frames['itunes'].scrollTo(250,250)"></iframe>

回答4:

Trick is all in the iframe style parameters. Placing in additional containers will help with alignment requirements.

<div style="border: 1px solid red; width: 70px; height: 20px; overflow:  
hidden;"><iframe style="width: 400px; height: 800px; margin-top: -200px; 
margin-left: -200px;" src="http://www.amazon.co.uk/product-reviews
/B0051QVF7A/ref=cm_cr_dp_see_all_top?ie=UTF8&showViewpoints=1&
sortBy=bySubmissionDateDescending" width="320" height="240"></iframe>
</div>

Credit to spamtech.co.uk for the help and examples: http://spamtech.co.uk/tips/position-content-inside-an-iframe/

来源：https://stackoverflow.com/questions/10210774/positioning-content-of-an-iframe-within-a-containing-div

标签

css

iframe

positioning