html - iframe 仅显示特定部分

Question

我正在处理 iframe，我只需要显示页面的特定部分。

我只想显示博客的这一部分。

http://s17.postimg.org/ickav5d33/pic.png

This is the actual page of the blog.

这是我的代码:

<div style="border: 1px solid rgb(201, 0, 1); overflow: hidden; margin: 15px auto; max-width: 736px;"> 
<iframe scrolling="no" src="http://teamiwatefsu.blogspot.com/2014/09/jsfiddle-demo-div-display-inline-block.html" style="border: 0px none; margin-left: -185px; height: 859px; margin-top: -533px; width: 926px;"> 
</iframe> 
</div>

这是一个Fiddle

我怎样才能做到这一点？

Answer 1

看来您只需要稍微调整一下内联 CSS。例如:

<div style="border: 1px solid rgb(201, 0, 1); overflow: hidden; margin: 15px auto; width: 675px;"> 
<iframe scrolling="no" src="http://teamiwatefsu.blogspot.com/2014/09/jsfiddle-demo-div-display-inline-block.html" style="border: 0px none; margin-left: 13px; height: 954px; margin-top: -422px; width: 660px;"> 
</iframe> 
</div>

这似乎与您提供的图片相符。

我更改了 iframe 的 margin-left、margin-top 和宽度。我还将 div 的最大宽度更改为具有不同值的简单宽度。

我使用 Firebug 计算了所有这些的值。我强烈建议您熟悉诸如此类的浏览器开发人员工具(如今所有现代浏览器都包含某种“开发人员工具”)，这些工具可让您“实时”使用这些东西，直到找到您喜欢的经过调整的 CSS。

JSFiddle:http://jsfiddle.net/cnmteg76/2/