在 ipad 和 iphone 中隐藏 iframe 的一部分答案

【问题标题】：hide a part of an iframe in ipad and iphones在 ipad 和 iphone 中隐藏 iframe 的一部分
【发布时间】：2013-01-29 11:21:24
【问题描述】：

我需要在 iframe 中从顶部隐藏 300 像素。我试图用溢出隐藏它：隐藏在 css 中，但它在 iphone 或 ipad 中不起作用。我该如何解决？

我的 HTML 代码

<div class="iframe-wrapper">
  <div class="iframe-content">
    <iframe src="http://my_url" width="940" height="900" frameborder="0" scrolling="no" </iframe>
  </div>
</div>

我的 CSS

.iframe-wrapper {
    position: relative; 
    overflow: hidden;
    width: 940px; 
    height: 600px;
}
.iframe-content {
    position: absolute; 
    top: -300px;
}

【问题讨论】：

你试过给.iframe-content一个宽度和高度等于它里面的iframe吗？

标签： iphone html css ipad iframe

【解决方案1】：

我已经根据您的代码制作了一个演示，并附上我的建议，它似乎正在工作：

html:

<div class="iframe-wrapper">
  <div class="iframe-content">
      <iframe src="http://www.google.com" width="400" height="500" frameborder="0" scrolling="no"/>
  </div>
</div>

css:

.iframe-wrapper {
    position: relative; 
    overflow: hidden;
    width: 400px; 
    height: 300px;
    border: 5px solid orange;
    margin: 20px;
    background: red;
}

.iframe-content {
    position: absolute;
    top: -300px;
}

iframe { background: blue; }

演示 - http://jsfiddle.net/MteRS/

我更改了宽度/高度，使其更适合 jsfiddle 输出面板。

【讨论】：