包含iframe子页面的滚动条设置

最新推荐文章于 2021-08-04 07:30:24 发布

leafly05

最新推荐文章于 2021-08-04 07:30:24 发布

阅读量1.4k

点赞数

分类专栏：页面风格、布局（css\js）文章标签：滚动条、iframe

本文链接：https://blog.csdn.net/leafly05/article/details/83977045

版权

页面风格、布局（css\js）专栏收录该内容

1 篇文章 0 订阅

订阅专栏

场景：
页面A 包含通过iframe包含子页面B ，设置各处的overflow为auto，结果纵向滚动条是iframe的，横向滚动条是子页面body的，只有当纵向滚动条拉到页面最下方横向滚动条才能显示，页面显示实在诡异。搞了半天，最后听说是文档类型doctype闹的，试了试，居然解决了。

目标：
根据子页面B 内容动态只显示一套滚动条，并且纵向横向滚动条均可见。

方法：
1、隐藏父页面iframe滚动条： <iframe id="imagePageIframe" style="width: 100%; height: 100%; overflow: hidden; " src="${ctp}/app/verify/imagePage.jsp"></iframe>
主要是overflow: hidden; （scroll显示 auto根据内容动态显示 hidden不显示）
2、去掉子页面B 的Transitional//EN文档类型声明：即修改文档声明为<!doctype html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
3、子页面B 的body style="overflow:auto"。
4、据说父页面 A 的文档类型要改成 HTML 4.01 Transitional ，我没改，也好使，呵呵。

关键在于，若子页面的文档声明为<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> （声明 Transitional//EN）,则子页面iframe的body style="overflow:auto"将不会生效，当然，若iframe是多层嵌套的，只想显示最里边那层页面的滚动条，就可以只将最里层的 Transitional//EN去掉，其它外层页面保留。

直接把子页面DOCTYPE声明去掉也能解决这个问题，但是DOCTYPE去掉后将导致ie7,ie8的css选择器不可用
（如设置button通用样式的css:
input[type="button"],input[type="reset"],input[type="submit"],button
{
background-image: url("../images/gray_button_bg.jpg");
background-repeat: repeat-x;
border: 1px solid #abc2e4;
height: 24px;
cursor: pointer;
padding: 0 3px;
}
），所以还是保留的好。