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

前提条件,内容区域:

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的需要滚动的元素不能滚动到底部的问题的更多相关文章

  1. jQuery UI resizble、draggable的div包含iframe导致缩放和拖拽的不平滑解决方法

    前言 不仅仅是jQuery UI resizble的div包含iframe会导致缩放的不平滑,draggable也会出现包含iframe会导致拖放的不平滑,但是因为jQuery UI有为draggab ...

  2. JavaScript----marquee滚动标签 图片无缝滚动 插入百度地图

    页面的自动滚动效果,可由javascript来实现, 但是有一个html标签 - <marquee></marquee>可以实现多种滚动效果,无需js控制. 使用marquee ...

  3. 在浏览器中使用jquery取得iframe中页面中指定元素的值的不同

    自己使用aspx页面中嵌套了ascx的页面其中使用了iframe的一些内容,出现了同一个页面的两种取值的方式 1. 在iframe的包含页面,需要使用iframe的页面中的元素,是需要使用$(wind ...

  4. 一文看懂js中元素的滚动大小(scrollWidth,scrollHeight,scrollTop,scrollLeft)

    滚动大小(scroll dimension) 滚动大小指的是包含滚动内容元素的大小. 以下是与元素滚动内容大小相关的属性: 1. scrollWidth:在没有滚动条的情况下,元素内容的总宽度. 2. ...

  5. js判断用户是否正在滚动滚动条,滚动条滚动是否停止

    js智能判断是否可以自动滚动 比如,做一个音乐播放器,边播放,边定位歌词,播放的时候,需要自动定位到播放语句,但是用户去拖动或者滚动div(歌词面板)时,这时就必须停止自动滚动,或者说是不能自动滚动, ...

  6. iframe多层嵌套时获取元素总结

    父页面获取子页面元素: 注意:onload事件 jQuery获取: $("iframe").contents().find("holder")......; ( ...

  7. 获得同级iframe页面的指定ID元素的几种实现方法

    1.JS实现: var object= window.parent.frames("要获得的iframe的name").contentDocument.getElementById ...

  8. JS判断鼠标向上滚动还是向下滚动

    js如何判断滚轮的上下滚动,我们应该都见到过这种效果,用鼠标滚轮实现某个表单内的数字向上滚动就增加,向下滚动就减少的操作,这种效果是通过js对鼠标滚轮的事件监听来实现的.今天简单的研究了一下如何使用j ...

  9. vue setTimeout用法 jquery滚动到某一个div的底部

    //vue 中setTimeOut用法 var $this = this; setTimeout(function(){ $this.goEnd() }, 10); goEnd:function(){ ...

随机推荐

  1. Unity 3D与Android Studio安卓交互之-导出jar包

    u3d与安卓 jar 包交互 本文提供全流程,中文翻译. Chinar 坚持将简单的生活方式,带给世人!(拥有更好的阅读体验 -- 高分辨率用户请根据需求调整网页缩放比例) Chinar -- 心分享 ...

  2. CodeForces - 1099F:Cookies (线段树)

    Mitya and Vasya are playing an interesting game. They have a rooted tree with n vertices, and the ve ...

  3. Light OJ 1199:Partitioning Game(SG函数模板)

    Alice and Bob are playing a strange game. The rules of the game are: 1.      Initially there are n p ...

  4. 斐波那契 - pythoon实现

    def fn_1(n): if n == 0 : return n elif n == 1 : return n else: a = [0,1] for i in range(2,n): a.appe ...

  5. 第一天 hello world

    二进制编译工具生成img软盘执行文件 二进制编译工具https://pan.baidu.com/s/1j3wAsFxTLWv17V55iNKJJw 利用Bz.exe工具写操作系统自启程序: 前0000 ...

  6. Layer 弹出页面 在点击保存关闭弹出层

    <script src="http://apps.bdimg.com/libs/jquery/2.0.0/jquery.min.js"></script> ...

  7. Go Example--range

    package main import "fmt" func main() { nums := []int{2,3,4} sum :=0 //rang 遍历切片 for _,num ...

  8. itcast-ssh-crm实践

    分析 BaseDao 文件上传

  9. navicat连接oracle方法及其安装包

    Navicat破解版下载(安装好之后,点击执行最后一个破解文件即可) 链接: https://pan.baidu.com/s/1pMpVwfT 密码: vrt6 连接oracle还需要下载以下文件,o ...

  10. 迭代器和增强型for循环

    ★迭代器: Java集合框架的集合类,我们有时候称之为容器.容器的种类有很多种,比如ArrayList.LinkedList.HashSet...,每种容器都有自己的特点,ArrayList底层维护的 ...