zoukankan      html  css  js  c++  java
  • (转)iframe 高度100%时,出现垂直滚动条

    问题

    需求是这样的,iframe在一个div中,并且iframe高度与div一样,所以设置了iframe高度是100%,结果div出现了滚动条,在排除了padding、margin的因素外,还是有滚动条。按理说,只有iframe有滚动条,父div不应该有滚动条。

    <div>
      <iframe frameborder="no" src="https://www.oschina.net/">
      </iframe>
    </div>
    html,
    body {
      height: 100%;
      padding: 0;
      margin: 0;
    }
    
    div {
      height: 100%;
      /*第一种解决方案*/
      /*font-size:0;*/
    
    }
    
    iframe {
      width: 100%;
      height: 100%;
      /*第二种解决方案*/
      /*vertical-aglin:top;*/
      /*第三种解决方案*/
      /*display:block;*/
    }

    效果图 
    这里写图片描述

    分析

    一般搜索后,找到了原因;简单来说,iframe=inline frame它是一个内联元素,默认是跟baseline对齐的,iframe后边有个看不见、摸不着的行内空白节点, 空白节点占据着高度,iframe与空白节点的基线对齐,导致了div被撑开,从而出现滚动条。查看空白节点捣鬼 
    找到原因了,解决方案也就简单了。 
    第一种,设置iframe的vertical-align:top 
    第二种,设置父div的font-size:0,从而影响空白节点的line-height是0,从而不占据高度。 
    第三种,改变iframe的内联元素性质,改为块级元素,display:block

    后续问题

    上述解释有点笼统,关于line-height和vertical-align(top、baseline)的详细功能,还得继续研究。等研究透彻,再重新解释这个问题。

  • 相关阅读:
    难道真的是RedBook错了?
    用一个土办法证明RedBook的错误
    Md5 Loader Demo
    simple shadow mapping
    又遇到让人疑惑的问题
    [洛谷P1037][题解]产生数
    [洛谷P1279][题解]字串距离
    [洛谷P1122][题解]最大子树和
    [洛谷P1144][题解]最短路计数
    Vue 之 Data
  • 原文地址:https://www.cnblogs.com/jj-notes/p/9667178.html
Copyright © 2011-2022 走看看