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

前提条件,内容区域:

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. django安装命令

    通过pip安装Django   ==指定版本号 pip install Django==2.0.2 查看djangoshifou安装成功:1.进入python ,2.import   django 查 ...

  2. eclipse如何为java项目生成API文档、JavaDoc

    当我们的项目很大,编写了很多代码的时候,就需要生成一个标准的API文档,让后续的开发人员,或者合作者可以清晰的了解您方法的使用,那么如何将自己的项目生成API文档呢? 1.点击eclipse的[Pro ...

  3. PAT-L2-007 家庭房产 (union-find) 小数据 没有什么是暴力解决不了的!!

    题目分析: 典型的union-find 算法 想法: 先不着急 union 因为每一个人的房产信息不知道 所以先输入所有信息 同时保留与自己有关系的每一个人 待初始化每一个人的房产信息后,再union ...

  4. PS学习之合成特效:被风沙侵蚀的动物们

    素材 大象 尘埃 裂纹 沙子 土地 正式操作: 打开PS 新建一个文件 选国际标准纸张  给分辨率为72(分辨率越大越占内存) 然后确定  将图片旋转90度(图像——旋转——(顺/逆)90度) 下面选 ...

  5. Python--异常处理和断言

    try关键字,定义获取程序错误 except关键字,出现异常错误执行里面的代码 Exception定义错误类,Exception能获取到所有类型的错误错误,as创建错误对象名称,自动获取错误信息 #! ...

  6. hdu4407 Sum 容斥原理

    XXX is puzzled with the question below: 1, 2, 3, ..., n (1<=n<=400000) are placed in a line. T ...

  7. python argv传递参数

    test.pyimport sysprint(sys.argv) python test.py arg1 arg2 arg3 打印["test.py","arg1&quo ...

  8. Mybaits代码生成使用

    https://jingyan.baidu.com/album/00a07f3869881082d028dc98.html PS:根据数据库中的表 生成代码

  9. MySQL安装步骤详解

    MySQL安装 一.MYSQL的安装 1.打开下载的mysql安装文件mysql-5.5.27-win32.zip,双击解压缩,运行“setup.exe”. 2.选择安装类型,有“Typical(默认 ...

  10. Scala 方法与函数

    Scala 方法与函数:http://www.runoob.com/scala/scala-functions.html Scala 有方法与函数,二者在语义上的区别很小.Scala 方法是类的一部分 ...