东南长平.宜福德.艺宝.中雷

 找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 667|回复: 0

如何让iframe框架高度自适应?

[复制链接]

21

主题

21

帖子

121

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
121
admin 发表于 2018-1-23 21:28:31 | 显示全部楼层 |阅读模式
html部分:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport">
    <title>南京宜福德信息科技有限公司</title>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="css/style.css">
   <link rel="stylesheet" type="text/css" href="css/bootstrap.css">
</head>
<body style="background-color: #eff9ff;">
    <div class="section" id="container">
         <!-- 头部 -->
        <div class="container cub-paddingleft">
            <div class="row cub-spacing">
                <div class="col-sm-12 col-xs-12">
                    <img class="cub-img" src="image/bailian.png">
                    <span class="header-font-style">南京宜福德信息科技有限公司</span>
                </div>         
            </div>
        </div>
            <!-- 框架页面 -->
            <div class="section iframe-box">
                <iframe class="s_iframe" name="main" id="main" width="100%" height="100%" src="http://www.baidu.com" frameborder="0" ></iframe>
            </div>
                <!-- 底部 -->
        <div class="container cub-paddingleft cub-bottom-top">
        <div class="row cub-center">
            <div class="col-sm-12 col-xs-12">
                <img class="cub-img-small" src="image/bailian.png">
                <span class="header-font-style-small">南京宜福德信息科技有限公司</span>&nbsp;&nbsp;&nbsp;
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <img class="cub-img-small-small" src="image/chengde.png">
                <span class="header-font-style-small">技术支持:南京软创异信息科技有限公司</span>
            </div>         
        </div>
    </div>      
    </div>
    <script type="text/javascript" src="scripts/jquery-2.1.4.min.js"></script>
    <script type="text/javascript" src="scripts/script.js"></script>
</body>
</html>


css部分:
*{
        font-family: '方正兰亭纤黑_GBK';
}

body{
        background-color: #eff9ff;
        padding: 0px;
        margin: 0px;
        height: 100%;
}
.cub-img{
        width: 8%;
}
.cub-img-small{
        width: 3%;
}
.cub-img-small-small{
        width: 2%;
}

.cub-center{
        text-align: center;
}
.header-font-style-small{
        font-size: 8px;
        color: #054971;
}
.header-font-style{
        font-size: 2em;
        color: #054971;
}
.cub-spacing{
        padding-top: 1em;
}
.cub-paddingleft{
        padding-left: 6em;
}
.cub-bottom-top{
        padding-top:1em;
        padding-bottom: 5px;
}
/*

*/
@charset "utf-8";
.section{
        position: relative;
        overflow: hidden;
        margin: 0 auto;
        width: 100%;
}
body,html{
        background-color: #eff9ff;
        min-width: 1000px;
}

.header{
        background-color: #eff9ff;
        padding-right: 40px;
        position: fixed;
        right: 0;
        top: 0;
        z-index: 999;
}

.iframe-box{
        padding-top: 1em;
        height: 80%;
}




js部分:
console.log("%c技术支持: 宜福德信息科技", "color:#ddd");


$(window).ready(function () {

    changeSize();

    // 屏幕尺寸改变时自适应
    window.onresize = changeSize;

    //设置全局变量
   var winHeight = $(window).height();
   var winWidth = $(window).width();
   var docHeight = $(document).height();
   var docWidth = $(document).width();

   function changeSize() {
       //设置全局变量
       winHeight = $(window).height();
       winWidth = $(window).width();
       docHeight = $(document).height();
       docWidth = $(document).width();

       // $("body,html").css("font-size", winWidth / 14.4 + "px");

       $("#container").css("height", winHeight);
       $("#content").css({
           "width": winWidth - $("#aside").width() + "px",
           "height": winHeight + "px",
           "min-width": 720 + "px"
       });
       $(".header").css("width", winWidth - $("#aside").width() + "px");
       $(".admin-txt").css({
           "width": $("#content").width() - 180 + "px",
           "margin-top": (100 - $(".admin-txt").height()) / 2 + "px"
       });
       // 系统公告
       $(".system-notice li").each(function () {
           $(this).find("a").css("width", $(this).width() - $(this).find("span").width() - 5)
       });
   }

   (function(){
        $(".aside-nav li").each(function(){
            var slide = false;
            $(this).find(".main-nav").click(function(){
                if (!slide) {
                    $(this).css("background-color","#1b2428");
                    $(this).find("span img").attr("src","images/icon (14).png");
                    $(this).siblings(".min-nav").slideDown(300,function(){
                        slide = true;
                    });
                }else{
                    $(this).css("background-color","#273238");
                    $(this).find("span img").attr("src","images/icon (3).png");
                    $(this).siblings(".min-nav").slideUp(300,function(){
                        slide = false;
                    });
                }
            });
        });
   }());

});



再下载个 jquery-2.1.4.min文件

回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关闭

站长推荐上一条 /1 下一条

QQ|Archiver|手机版|小黑屋|Championly Tec. 站长统计

GMT+8, 2020-9-18 23:47 , Processed in 0.192583 second(s), 22 queries .

Powered by Discuz! X3.4 Licensed

© 2001-2017 Comsenz Inc.

快速回复 返回顶部 返回列表