CSS 在包含的 div 中定位 iframe 的内容
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10210774/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
positioning content of an iframe within a containing div
提问by user1149499
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.
我有一个页面需要通过 iframe 提供，但我只需要显示页面的一部分，而不是整个页面。
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.
我认为最好的选择是在包含“溢出：隐藏”的包含 div 中提供 iframe，以便它像一个相框。这有效，但问题是我想要显示的内容位于 iframe 页面的中间，而 div 始终假设 0,0 是框架的开始。我需要定位 iframe，以便 div 正好位于我想要可见的页面部分之上。
Can I do this?
我可以这样做吗？
回答by krisrak
Use negative values for margin-top and margin-left to position the iframe. Look at the code below:
对 margin-top 和 margin-left 使用负值来定位 iframe。看看下面的代码：
<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>
回答by Faust
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 中的内容中，如果您可以设置一个元素，该元素的 id 标记了您想要通过的内容部分的最顶部，那么您可以在 url 上使用该锚点设置 iframe 的 src 属性
iframe content's HTML:
iframe 内容的 HTML：
[a bunch of markup/stuff that you don't want to show]
....
<div id="topOfVisibleArea"></div>
[more markup]
iframe tag:
iframe 标签：
<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.
或者您可以在 div 内的 iframe 上使用绝对定位。您需要 iframe 的高度和宽度比安装它的窗口更宽更高，以适应偏移。
See this example: http://jsfiddle.net/sNSMw/
请参阅此示例：http: //jsfiddle.net/sNSMw/
回答by Thiwanka
<iframe name="itunes" src="http://itunes.apple.com/us/album/threads/id509846713" frameborder="0" width="500" height="600" onload="window.frames['itunes'].scrollTo(250,250)"></iframe>
回答by l0g1kaL
Trick is all in the iframe style parameters. Placing in additional containers will help with alignment requirements.
技巧全在iframe 样式参数中。放置在额外的容器中将有助于满足对齐要求。
<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/
归功于 spamtech.co.uk 的帮助和示例：http://spamtech.co.uk/tips/position-content-inside-an-iframe/
