iFrame只要竖滚动条,不要横滚动条

插入iFrame的代码如下

<iframe width="100%" height="100%" id="ghrzFrame" frameborder="0" scrolling="auto" name="ghrzFrame" src="iframe.html"></iframe>

滚动条设了自动auto,当页面内容多时,会自动出现滚动条;

预想效果是出现了,但是不仅出了右侧的竖滚动条,下面左右滚动的横滚动也出现了,调整内容宽度,也一样;郁闷;虽然不影响大碍,但是觉得太不爽了。

看网上有人说,设置body的css样式;
<style type="text/css">
body {
overflow-x : hidden ;
}
</style>

试过之后,发现不行,有的说是IE不支持,我看可能是我的页网是xhtml的问题吧,如果去掉了头部的DTD;就是
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

不过我不想这样;因为我所有的网页都是基于W3C标准的,我并不希望因为这个小功能而去改动代码规范;

又试了其它几个办法,也是不行;不管怎么设置,内容一多,就出现横滚动条;

通过测试,得到方法一:

想到设置body宽度的做法,在iFrame包含的页面内中写入,如下
body {
95%;
margin: 0px;
padding: 0px;
}

通过css来控制宽度,我没有设100%,默认是100%;而是设了95%;这样因为整体页面的宽度小于100%,所以就不再出现横滚动条了,而竖滚动条依然起作用;

后又经人介绍,得到方法二:

在iFrame的包含页面里加入
<style>
html { overflow-x:hidden; }
</style>

两种方法都可以搞定;

玉环人才吧 玉环人才网 玉环人力网 玉环招聘网 三支脚人才网

玉环人力网(又名玉环人才网)是玉环人才吧旗下一流的玉环人力资源招聘行业服务品牌,汇集海量玉环人才,开放玉环人才简历和玉环岗位,提供玉环招聘网,玉环人才市场动态行情,玉环劳务派遣,玉环培训等,是玉环最大的人才网站。

原文地址:https://www.cnblogs.com/taizhouxiaoba/p/1414426.html