Question

我知道这个问题之前已被问过很多但问题是我正在尝试用html，css，Jquery构建一个响应式工具。我正在使用iframe来显示html（例如：一个登陆页面）a看到不同的响应视图，但是当内容高于滚动条出现的窗口（水平，垂直条）时，我想消失至少水平条，因为如果我有320px的响应视图，当滚动条出现时它会隐藏部分内容，我必须使用水平滚动。

我尝试了不同的代码，没有人工作。那么请你帮帮我吧。谢谢！

<div id="resize-box">
                <iframe src="blank.html" frameborder=0 scrolling="no"></iframe>
</div>

如果我使用“滚动否”，它会隐藏滚动条，但功能上会停止工作，我会需要它。

我试过这个，但没有幸运。 Hide horizontal scrollbar on an iframe?

Answer 1

修改 blank.html ，例如＆gt;

<html>
<head>
    <style>
    html, body {
        padding: 0;
        margin: 0;
        overflow: hidden;
    }
    #bla {
        position: absolute;
        left: 0;
        top: 0;
        right: -30px;
        bottom: 0;  
        padding-right: 15px;
        overflow-y: scroll;
    }
    </style>
</head>
<body>
    <div id="bla">
         <!-- lines here -->
    </div>
</body>

现在<iframe src="blank.html" />

如您所见，滚动条已隐藏但仍可滚动。

Answer 2

兄弟...使用一行css ......

#resize-box iframe { overflow-y: auto }

如果（并且仅当）内容高于div的高度，这基本上使得iframe具有滚动条。

只需确保id为'resize-box'的div具有设定的高度，例如

#resize-box { height: 900px }

隐藏iFrame中的滚动条

2 个答案: