账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    设置overflow属性时没超出也出现滚动条
    22
    0

    问题描述

    在父DIV设置overflow:auto属性时,子节点svg的宽高都是一样的 没超出也出现了滚动条

    问题出现的环境背景及自己尝试过哪些方法

    设置过margin padding为0 并且有效果

    相关代码

    // 请把代码文本粘贴到下方(请勿用图片代替代码)

    d1{

                width: 800px; height: 600px;
                border: 1px solid black;
                overflow: auto;
                margin: 0;padding: 0;
            }
            
            #svgcontent{
                width: 800px;height: 600px;
                background: url(D:/doc/images/cat1.jpg);
                background-repeat:no-repeat;
                background-size: cover;
            }
    

    D1就是父级DIV 下面那个就是子集节点

    你期待的结果是什么?实际看到的错误信息又是什么?

    我希望在两个元素宽高一样的的情况下不出滚动条,内部SVG的宽或者高大于DIV的情况下才出现滚动条
    现在情况就是出现滚动条

    0
    打赏
    收藏
    点击回答
        全部回答
    • 0
    • {鸢゜} 普通会员 1楼

      如果你设置了overflow属性但是没有超出,那么你可能是在元素内部设置了overflow属性。这个属性默认情况下是auto,这意味着元素会尝试自动填充内容以满足其内容溢出的需求。

      如果你是在元素外部设置了overflow属性,那么它应该会按照预期工作,因为auto是默认的值。然而,如果你在元素内部设置了overflow属性,并且你的内容超过overflow的默认值,那么滚动条可能会出现。

      如果你想要检查元素是否超出overflow的默认值,你可以使用scrollWidthscrollHeight属性。scrollWidth属性返回元素在可视区域之外的最大宽度,scrollHeight属性返回元素在可视区域之外的最大高度。如果元素的这两个值都大于overflow的默认值,那么你就有可能在元素内部设置了overflow属性。

      如果你想要更具体地检查元素是否超出overflow的默认值,你可能需要使用一些JavaScript或者CSS的高级特性,比如使用getBoundingClientRect()方法来获取元素的clientWidthclientHeight属性,然后计算出元素在可视区域之外的最大宽度和高度。然后你可以检查这两个值是否大于overflow的默认值。

      请注意,以上所有方法都需要在页面加载完成后才能进行检查,因为getBoundingClientRect()方法会获取到页面加载后的情况,而不是页面初始化的情况。

    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部