iframe框根据内容自适应高度(100%可用)

简介: iframe框根据内容自适应高度(100%可用)

iframe框根据内容自适应高度(100%可用)

HTML:

<iframe id="iframe" src="自己写地址" name="content" frameborder="0" style="width: 100%;height: 100vh;"></iframe>

script:

 <script type="text/javascript" src="https://code.jquery.com/jquery-3.4.0.min.js"></script>
    <script type="text/javascript">
        $(function() {
            $("#iframe").height(0); //用于每次刷新时控制IFRAME高度初始化 
            var height = $("#iframe").contents().height() + 20;
            $("#iframe").height(height < 800 ? 800 : height); //最小的高度700
        }
    </script>

在不显示滚动条的方式支持【滚轮】拉动。

相关文章
|
移动开发 JavaScript 前端开发
如何处理 h5 使用 iframe 嵌套页面,内外 viewport 不一致导致的缩放问题?
如何处理 h5 使用 iframe 嵌套页面,内外 viewport 不一致导致的缩放问题?
1694 0
|
2月前
CSS_定位_网页布局总结_元素的显示与隐藏
CSS_定位_网页布局总结_元素的显示与隐藏
28 0
|
5月前
|
前端开发
css实用技巧——给锚点定位添加偏移
css实用技巧——给锚点定位添加偏移
177 3
|
6月前
|
移动开发 前端开发 HTML5
有关CSS中排版常见问题(清除默认样式问题 + 元素居中问题 + 元素之间的空白问题 + 行内块的幽灵空白问题)
有关CSS中排版常见问题(清除默认样式问题 + 元素居中问题 + 元素之间的空白问题 + 行内块的幽灵空白问题)
|
前端开发 容器
如何使用 CSS 来控制 img 标签在父元素中自适应宽度或高度,并按比例显示
如何使用 CSS 来控制 img 标签在父元素中自适应宽度或高度,并按比例显示
797 1
|
前端开发
css给超出内容设置滚动条和去除滚动条显示:
css给超出内容设置滚动条和去除滚动条显示:
219 0
|
前端开发
CSS层级小技巧:在滚动时自动添加头部阴影
CSS层级小技巧:在滚动时自动添加头部阴影
251 0
CSS层级小技巧:在滚动时自动添加头部阴影
|
编解码 前端开发
前端设置页面字体尺寸跟随屏幕大小而进行变化
前端设置页面字体尺寸跟随屏幕大小而进行变化
681 0
前端设置页面字体尺寸跟随屏幕大小而进行变化
|
前端开发
通过css将网站页面变为黑白显示
通过css将网站页面变为黑白显示
|
JavaScript
原生js判断某个区域的滚动条滚动到了底部
原生js判断某个区域的滚动条滚动到了底部
原生js判断某个区域的滚动条滚动到了底部