iframe高度自适应

需求:一个div内包含着一个div(固定高),和一个iframe, iframe的高取决于外层div(设备高度)减去固定高,让iframe内的div始终显示在底部


button.html

<body>

            <div id="box">

                    <div>积分转入钱包</div>

                    <div>从钱包转出至积分</div>

            </div>

</body>

<script>

                window.onload = function(){

                            var a = window.location.search.slice(8)-440;

                            document.getElementById("box").style.marginTop = a + 'px';

                }

</script>

myWallet.html

<body>

            <div id="box">

                <div style="height: 400px;background: pink;">

                </div>

                <iframe src="button.html" style="width:100%;background: skyblue;" id="iframeId" name="iframewin" frameborder="0">

                </iframe>

</div>

</body>

<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

<script type="text/javascript">

        // $('#iframeId').attr('src',"button.html?height="+$(window).height())       //jq

        document.getElementById("iframeId").style.height = $(window).height()-400+'px'

        document.getElementById("iframeId").src = "button.html?height="+$(window).height()

</script>


小结:

iframe里面,写html元素,是显示不出来的,需要通过src属性,链接其他的html,在vue里面,html需要放在static文件夹下,第三方插件的库,也需要放在static文件夹下

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容