首页 > 其他 > 详细

记一次包含iframe的需要滚动的元素不能滚动到底部的问题

时间:2018-09-19 11:06:05      阅读:265      评论:0      收藏:0      [点我收藏+]

一个包含上头部、下部模块(包含左右两边模块:侧边栏、内容区域)的页面

前提条件,内容区域:

1、元素高度需要自适应屏幕高度

2、里面内容足够长时,可以滚动

3、包含了一个iframe嵌入的内容很长的页面

 

问题:

 不要滚动内容区域时出现双滚动条

 

解决方案:

1、内容高度设置为body的高度-头部高度

    滚动内容区域还是出现了滚动条,说明内容的高度设置的高了。重新设置,计算准确即可解决双滚动条的问题。

2、没有减去内容区域设置的padding值,导致设置的内容区域的高度高了

    当时为了快速解决问题,直接将内容区域设置的overflow:auto去掉了,滚动iframe嵌入的页面时确实不会再出现双滚动条,但是在屏幕很宽时会出现滚动不到底部的问题,一部分内容被截掉,看不见。

3、包含iframe的页面的高度设置的height:100%,为父元素的高度,当时iframe设置的高度有问题(同事写了一段看不懂的高度设置的代码样式)

    内容区域设置准确的高度之后,然后添加超出滚动的属性overflow:auto包含iframe的页面的父元素设置height:auto,让高度自适应子元素内容的高度即可。

 <div class="ninth-studio">
        <iframe src="地址"
                allowfullscreen
                seamless
                sandbox="allow-same-origin allow-scripts allow-top-navigation allow-popups"
                frameborder="0">
        </iframe>
    </div>
<style lang="scss" scoped>
    .ninth-studio {
        width: 100%;
        background-color: #fff;
        border-radius: 4px;
        height: auto;
        min-width: 910px;
        display: flex;
        justify-content: center;
        align-items: center;
        embed, iframe {
            width: 100%;
        }
    }
</style>

  

总结:

解决双滚动问题,第一个肯定是先解决高度设置的问题,一般的需求都是,内容区域滚动,最外层就不要有滚动条。设置父元素的高度为刚好屏幕可以展现内容的高度,在子元素中去滚动内容。

height:100%和height:auto的区别是什么呢?

100%是由父元素的高度决定的,auto是由子元素的高度决定的。一个div包含了一个元素,这个元素里面包含了内容,这个div的高度应该是设置为height:auto,而不是100%。

iframe默认是display:inline-block的布局,如果发现使用iframe多了白边,将iframe的display设置为非inline-block。

记一次包含iframe的需要滚动的元素不能滚动到底部的问题

原文:https://www.cnblogs.com/yy95/p/9673370.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!