css - 在包含的 div 中定位 iframe 的内容

标签 css iframe positioning

我有一个需要通过 iframe 提供的页面,但我只需要显示页面的一部分,而不是整个页面。

我当前的代码是:

<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>

我认为最好的选择是在包含“溢出:隐藏”的 div 中提供 iframe,这样它就像一个相框。这行得通,但问题是我要显示的内容位于 iframe 页面的中间,而 div 始终假设 0,0 是框架的开始。我需要定位 iframe,使 div 恰好位于我希望可见的页面部分上方。

我可以这样做吗?

最佳答案

为 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>

关于css - 在包含的 div 中定位 iframe 的内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10210774/

相关文章:

html - 如何在不隐藏部分 DIV 的情况下使用 CSS float

css - 如何向下移动滚动条

css - 如何根据文本框框位置对齐建议列表

html - 布局冲突问题

html - 难以使 Strava Iframe 响应式 (CSS/HTML)

css - 在不使用 LESS 的情况下更改 Bootstrap 导航栏折叠断点

javascript - 带有 iframe 的 Google map 在页面加载后不起作用

iframe - X-Frame-Options header 在防止恶意框架方面有多有用?

html - 媒体查询未正确缩放

css - 调整大小时,WordPress 管理区域有重叠的面板