iframe只显示页面的某个部分
我正在研究iframe，而且我需要在iframe中显示页面的某个部分（比如右上angular），大小约为300px，高度为150px。
例：
假设我想将www.mywebsite.com/portfolio.php的iframe放在页面上，但是iframe的大小只能显示右上angular的“ portfolio-sports ”部分。
我怎样才能做到这一点？
谢谢。
编辑 ： 演示
[感谢Pointy]
一个<iframe>给你一个完整的窗口来处理。 最直接的做法是让你的服务器给你一个完整的页面，只包含你想要显示的片段。
或者，你可以使用一个简单的<div>并使用jQuery的“加载”函数来加载整个页面，只是select你想要的部分：
$('#target-div').load('http://www.mywebsite.com/portfolio.php #portfolio-sports');
您可能还需要做其他事情，而且显着的不同之处在于内容将成为主页面的一部分，而不是分隔为单独的窗口。
我得到了这个工作对我很好。
<div style="border: 3px solid rgb(201, 0, 1); overflow: hidden; margin: 15px auto; max-width: 736px;"> <iframe scrolling="no" src="http://www.w3schools.com/css/default.asp" style="border: 0px none; margin-left: -185px; height: 859px; margin-top: -533px; width: 926px;"> </iframe> </div>
这是为你工作还是不让我们知道。
来源： http : //www.dimpost.com/2012/12/iframe-how-to-display-specific-part-of.html
我需要一个embedded一个垂直滚动条的外部页面的一部分的iframe，在页面的顶部和左侧裁剪导航菜单。 我可以用一些简单的HTML和CSS来完成。
HTML
<div id="container"> <iframe id="embed" src="http://www.example.com"></iframe> </div>
CSS
div#container { width:840px; height:317px; overflow:scroll; /* if you don't want a scrollbar, set to hidden */ overflow-x:hidden; /* hides horizontal scrollbar on newer browsers */ /* resize and min-height are optional, allows user to resize viewable area */ -webkit-resize:vertical; -moz-resize:vertical; resize:vertical; min-height:317px; } iframe#embed { width:1000px; /* set this to approximate width of entire page you're embedding */ height:2000px; /* determines where the bottom of the page cuts off */ margin-left:-183px; /* clipping left side of page */ margin-top:-244px; /* clipping top of page */ overflow:hidden; /* resize seems to inherit in at least Firefox */ -webkit-resize:none; -moz-resize:none; resize:none; }
<div style="position: absolute; overflow: hidden; left: 0px; top: 0px; border: solid 2px #555; width:594px; height:332px;"> <div style="overflow: hidden; margin-top: -100px; margin-left: -25px;"> </div> <iframe src="http://example.com/" scrolling="no" style="height: 490px; border: 0px none; width: 619px; margin-top: -60px; margin-left: -24px; "> </iframe> </div> </div>
不知何故，我摆弄了一些，我怎么得到它的工作：
<iframe src="http://www.example.com#inside" width="100%" height="100%" align="center" ></iframe>
我认为这是第一次这个代码已经发布，所以分享
将iframe设置为适当的宽度和高度，并将滚动属性设置为“no”。
如果所需的区域不在页面的左上angular，则可以将内容滚动到适当的区域。 参考这个问题：
用JavaScript滚动iframe？
我相信只有当这两个页面在同一个域上时，你才能够滚动它。
假设您正在使用iframe将可供公众使用但不属于您的内容导入到您的网站中，则始终可以使用页面定位器来指导您将iframe加载到您想要的位置。
首先，创build一个具有显示数据所需宽度和高度的iframe。
<iframe src="http://www.mygreatsite.com/page2.html" width="200px" height="100px"></iframe>
第二次安装插件，如Show Anchors 2 for Firefox，并使用它来显示页面上的所有页面锚点，你希望显示在你的iframe中。 find想要使用框架的定位点，然后右键单击定位点复制定位点。
（你可以在这里下载并安装插件=> https://addons.mozilla.org/en-us/firefox/addon/show-anchors-2/ ）
第三，使用带有锚点的复制url作为iframe源。 当框架加载时，它将显示从您指定的锚点开始的页面。
<iframe src="http://www.mygreatsite.com/page2.html#anchorname_1" width="200px" height="100px"></iframe>
这是精简的指令列表。 希望能帮助到你！
<div style="border: 2px solid #D5CC5A; overflow: hidden; margin: 15px auto; max-width: 575px;">
