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

前提条件,内容区域:

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. ccf-170904-通信网络

    ccf-170904-通信网络 题目分析: 有向图 如果a可以直接或者间接连接b则a与b相互知晓 一共有多少个点知道n个点 刚开始算错复杂度,优化后反而超时 ...事实无脑爆搜这道题也是可取的因为只有 ...

  2. php 中使用正则

    1.匹配一个由一个小写字母和一位数字组成的字符串,比如”z2″   用^[a-z][0-9]$ 2.当在一组方括号里使用^是,它表示“非”或“排除”的意思   比如要求第一个字符不能是数字:^[^0- ...

  3. Socket远程桌面

    自建Socket转发,使用远程桌面(mstsc)连接家中电脑   网络结构图如下: 开题先放图,一切全靠编哈哈. 进入正题! 如图所示,我们需要一个公网服务器,利用公网服务器将内网的数据进行转发,从而 ...

  4. (21)jq动画

    jq动画的优点 优点: 1.可以知道动画结束的表示(结束的回调函数) 2.可以利用jq动画插件完成复杂的动画 动画有三个参数:动画的样式是字典.动画持续的事件,动画结束回调函数 <!DOCTYP ...

  5. 《DSP using MATLAB》Problem 5.7

    代码: %% ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ %% Output In ...

  6. hdu2732 Leapin' Lizards 最大流+拆点

    Your platoon of wandering lizards has entered a strange room in the labyrinth you are exploring. As ...

  7. Tomcat端口被占用解决办法

    1.在cmd运行窗口中输入netstat -ano 查看当前被占用的端口所对应的进城PID: 2.输入命令tasklist,找到进程号PID对应的进程名称(映像名称) 3.打开任务管理器(ctrl+a ...

  8. Go Example--for循环

    package main import "fmt" func main() { i := 1 //Go循环只有for, 第一种循环方式 for i<=3 { fmt.Prin ...

  9. This Jenkins instance appears to be offline

    tomcat 方式启动jenkins时,报:This Jenkins instance appears to be offline and offers options to "Config ...

  10. skipper lua 添加luarocks 包管理

    skipper 支持基于lua 的script 扩展,同时设计比较方便的filter模型,让我们可以方便 进行request.response的扩展,结合lua 社区的包我们可以快速的进行新功能的开发 ...