Question

我有一个jsFiddle here ...

我正在尝试在iframe中显示网站，但没有滚动条。我在iframe上尝试了overflow: hidden;，无论是头部样式还是内嵌式。它不起作用。

.iphone5 {
    background-image: url("images/iphone5-upright.png");
    background-repeat: no-repeat;
    height: 631px;
    width: 300px;
    margin: 20px auto 30px;
    position: relative;
}
iframe { overflow: hidden; }

我也试图保持滚动的能力......

我哪里错了？

编辑：如果不删除侧边栏，为什么不隐藏它？有没有办法用边距和填充做到这一点？

Answer 1

你可以这样做一些技巧。这样您就可以隐藏用户的滚动条。

使用iframe元素包裹您的span并在 CSS 下方应用。

<强> HTML：

<div class="iphone5">
    <span class="frameBox">
    <iframe  style="float: left; width: 277px; height: 445px; margin: 93px 0 0 26px; src="" id="iframe"></iframe>
</span>
</div>

<强> CSS

.frameBox {
   width:275px;
   height:520px;
   overflow:hidden;
   display:block;
}

<强> DEMO FIDDLE

Answer 2

尝试将scrolling="no"作为属性添加到iframe代码。

似乎可以在Chrome中使用。示例小提琴： http://jsfiddle.net/ELf3b/2/

相应地设置iframe尺寸和滚动条的样式。您也可以尝试使用css规则：

iframe[scrolling='no'] { overflow: hidden; }

要保持垂直滚动，请尝试按照Prasanth K C的建议将iframe嵌套在另一个元素中。

从iframe中删除滚动条（x和y）

2 个答案: