一个包含上头部、下部模块（包含左右两边模块：侧边栏、内容区域）的页面
前提条件，内容区域：
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 {
100%;
background-color: #fff;
border-radius: 4px;
height: auto;
min- 910px;
display: flex;
justify-content: center;
align-items: center;
embed, iframe {
100%;
}
}
</style>
总结：
解决双滚动问题，第一个肯定是先解决高度设置的问题，一般的需求都是，内容区域滚动，最外层就不要有滚动条。设置父元素的高度为刚好屏幕可以展现内容的高度，在子元素中去滚动内容。
height：100%和height：auto的区别是什么呢？
100%是由父元素的高度决定的，auto是由子元素的高度决定的。一个div包含了一个元素，这个元素里面包含了内容，这个div的高度应该是设置为height：auto，而不是100%。
iframe默认是display：inline-block的布局，如果发现使用iframe多了白边，将iframe的display设置为非inline-block。