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

前提条件,内容区域:

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. iproute2 与 net-tools

    https://linux.cn/article-4326-1.html https://blog.csdn.net/astrotycoon/article/details/52317288 如今很多 ...

  2. HDU 1716:排列2(全排列)

    排列2 Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Total Submis ...

  3. 牛客国庆集训派对Day4 J-寻找复读机

    链接:https://www.nowcoder.com/acm/contest/204/J 来源:牛客网 时间限制:C/C++ 1秒,其他语言2秒 空间限制:C/C++ 1048576K,其他语言20 ...

  4. 在windows 上的RedisClient 上连接远程linux redis ("jave.net.ConnectException: Connection refused:connect")

    1.把防火墙禁用掉 2.redis.conf配置文件,注释掉bind 127.0.0.1 3.重启redis服务

  5. 通过更改服务器解决双系统ubuntu时间+8

    安装ntpdate: sudo apt-get install ntpdate 设置校正服务器: sudo ntpdate time.windows.com 设置硬件时间为本地时间: sudo hwc ...

  6. hdu4300 Clairewd’s message 扩展KMP

    Clairewd is a member of FBI. After several years concealing in BUPT, she intercepted some important ...

  7. gorm-Duplicate-entry

    gorm  insert  data to mysql tips: (Error 1062: Duplicate entry '267857' for key 'PRIMARY') reason: u ...

  8. Centos7网络正常,但使用yum提示安装源无法连接

    可以尝试使用yum clean all清空yum源本地缓存

  9. centos7设置grub密码保护

    设置grub密码保护:查看grub登录用户名cat /etc/grub.d/01_users,可以看到用户名为root.通过grub2-setpasswords设置grub密码,确认密码 cat /b ...

  10. mysql新建用户在本地无法登录

    新建了一个mysql用户,但是无法在本地登录,即使已经授权任一ip都可以登录,甚至特地写清楚localhost登录,还是不行,情况如下 [root@localhost zabbix-release-3 ...