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

Posted 2021-01-07 yy95

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

前提条件，内容区域：

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。