zoukankan      html  css  js  c++  java
  • div中iframe高度自适应问题

    网页分为上、中、下三部分,上、下高度固定中间高度自适应;中间分为左、右两部分,左边宽度固定,右边宽度自适应。现在右侧div是宽度和高度都是自适应,右侧div里有个IFrame,想让IFrame自适应外部div的宽度和高度?

    我自己做的时候出现的问题是:当ifame的width和height设置为100%时,iframe会被挤出div,下滑到div的下面。然后我试了很多网上说的也没有解决,然后加了个东西就不会出现那种情况了

    下面为我的div的js设置

    //window.onresize表示窗口触发时间的时候执行
    //两个函数,用闭包包裹起来()()
    window.onload=function(){
        (window.onresize=function(){
        //获取可见宽度
        var width=document.documentElement.clientWidth-180;//180为左边的div的大小
        //获取可见高度
        var height=document.documentElement.clientHeight-80;//80为头部的div的大小可自己修改
        
        //如果有宽度就给值,
        if(width>=0){
            document.getElementById('main').style.width=width+'px';
            
        }
        if(height>=0){
            document.getElementById('sidebar').style.height=height+'px';
            document.getElementById('main').style.height=height+'px';
        }
    })()};

    这个是css

    html{
        overflow: hidden;
        /*火狐则会去除改变窗口大小时出现的白条这个bug*/
    }

    仅供参考,不喜勿喷。

  • 相关阅读:
    Mybatis实现数据的增删改查(CRUD)
    Spring MVC基础入门
    Swap in C C++ C# Java
    java和c#使用hessian通信
    基于Netty4的HttpServer和HttpClient的简单实现
    RabbitMQ的几种典型使用场景
    java多线程编程
    singleton pattern的推荐实现
    python多线程编程
    基于GMap.Net的地图解决方案
  • 原文地址:https://www.cnblogs.com/-lin/p/5837311.html
Copyright © 2011-2022 走看看