`

<转>iframe去掉横向滚动条

JavaScript 
阅读更多

如题，就是在网页中，只显示右侧的垂直滚动条，而不要底部的水平滚动条；这个问题让我挠头了半天。

做的那个管理界面，为了能让菜单在整个窗口中显示，我没有用Frame，而是用了iFrame；为了让iFrame窗口适用大小，我也用JavaScript代码做了判断；

插入iFrame的代码如下(我没有设宽高，宽高有Js代码控制的，这里不再描述)
<iframe src="welcome.html" name="workArea" align="middle" marginwidth="0" marginheight="0" allowtransparency="true" application="true" id="workArea" scrolling="auto"></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 {
width: 95%;
margin: 0px;
padding: 0px;
}

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

后又经人介绍，得到方法二：

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

两种方法都可以搞定；

这些小问题，很烦人，要说也没有什么技术含量，所以很多程序员不愿意去做，没办法，要想做得好，做得细致，光有高深技术是不行的，大多时间都是消耗在这些小问题上

分享到：
| ie onmouseup和onclick事件执行顺序
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    自制c#版<iframe>查杀软件

    此为本人自制的一款用于查杀&lt;iframe&gt;的软件，在vs 2003环境中利用c#语言开发的一款软件。可以双击readweb.exe直接运行。&lt;br&gt;用人格担保无病毒，但是还是建议使用前先进行查毒，防止因为其它原因感染病毒。&lt;br&gt;软件...

    C#编程经验技巧宝典

    85&lt;br&gt;&lt;br&gt;0131　巧截字符串的数字　86&lt;br&gt;&lt;br&gt;0132　如何存储变长字符串　86&lt;br&gt;&lt;br&gt;0133　在进行字符串比较时忽略大小写　87&lt;br&gt;&lt;br&gt;0134　如何去除字符串尾空格　87&lt;br&gt;&lt;br&gt;0135　如何去掉字符串中所有空格　...

    html 网页加载

    &lt;iframe src="show.asp" frameBorder="0" width="500" scrolling="no" height="230"&gt;&lt;/iframe&gt;

    discuz 2.2Fsp1插件加强版

    )&lt;br&gt; 显示会员详细发贴资料-[开关版]&lt;br&gt; 无发贴权就不显示发贴按钮&lt;br&gt; 文章动作&lt;br&gt; 为论坛搜索加入搜索引擎&lt;br&gt; 为表情图标面板增加滚动条&lt;br&gt; 万年历&lt;br&gt; 团队管理&lt;br&gt; 贴子被评为精华后自动给作者发短消息&lt;br&gt;...

    JS去除iframe滚动条的方法

    主要介绍了JS去除iframe滚动条的方法,涉及javascript操作iframe中属性的技巧,非常具有实用价值,需要的朋友可以参考下

    js 框架之一

    &lt;br&gt; }&lt;br&gt; &lt;/script&gt;&lt;br&gt; &lt;/head&gt;&lt;br&gt; &lt;br&gt; &lt;body&gt;&lt;br&gt; &lt;div id=cpst style="display:none"&gt;&lt;br&gt; &lt;br&gt; &lt;iframe src="image/cpst.jpg" &lt;br&gt;style="position:absolute; visibility:inherit; top:0px; left:0px; ...

    新浪推荐浮动广告

    charset=gb2312" /&gt;&lt;br&gt;&lt;title&gt;test&lt;/title&gt;&lt;br&gt;&lt;/head&gt;&lt;br&gt;&lt;body leftmargin="0" topmargin="0" rightmargin="0" bottommargin="0"&gt;&lt;br&gt;&lt;table height=1000&gt;&lt;br&gt;&lt;tr&gt;&lt;td&gt;dddd&lt;/td&gt;&lt;/tr&gt;&lt;br&gt;&lt;/table&gt;&lt;br&gt;&lt;/body&gt;&lt;br...

    轻轻松松学用javascript编程(PDF)

    配图列表&lt;br&gt;列表 &lt;br&gt;1 说明&lt;br&gt;1.1 主要的内容&lt;br&gt;1.2 学习目标 &lt;br&gt;2 了解JavaScript 浏览器上的程序语言 &lt;br&gt;2.1 JavaScript 操作对象的简单介绍-- 属性和方法&lt;br&gt;2.2 JavaScript 代码的加入 &lt;br&gt;2.2.1 加入...

    追米网在线投稿系统

    width:57%"&gt;&lt;/iframe&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;演示：http://www.zhuimi.com/tg/&lt;br&gt;&lt;br&gt;QQ：503703&lt;br&gt;追米网官方：http://www.zhuimi.com&lt;br&gt;修远设计：http://www.xiuyuan.cn/&lt;br&gt;主机域名：...

    DotNetTextBox所见即所得编辑器控件 v3.3.1

    &lt;br&gt;2) 修正控件在浏览器滚动条下端位置时弹出DIV窗口会出现显示位置有误的BUG。&lt;br&gt;3) 修改原ImgPathType属性名称为PathType,并且路径形式的切换对插入文件路径和插入图片路径都生效(原来的属性仅对图片路径生效)。...

    asp.net程序开发范例宝典

    第2章　HTML开发与实践　15&lt;br&gt;2.1　框架的使用　16&lt;br&gt;实例009　使用FrameSet框架布局聊天室　16&lt;br&gt;实例010　使用IFrame框架布局企业管理系统　17&lt;br&gt;2.2　滚屏的实现　18&lt;br&gt;实例011　滚动显示博客公告　18&lt;br&gt;...

    解决 Ie 6下 select挡住div的通用函数

    /**&lt;br&gt;* 让iframe 显示在 指定的div下面 针对ie6 select挡住div 的bug 采用 iframe来当作div的底&lt;br&gt;* &lt;br&gt;* @param string divId 需要解决的div层&lt;br&gt;* @param string iframeId 采用的 IFRAME ,如果不指定 自动...

    Html5中文手册(程序员必备手册)

    42、&lt;iframe&gt; 定义行内的子窗口（框架）。 43、&lt;img&gt; 定义图像。 44、&lt;input&gt; 定义输入域。 45、&lt;ins&gt; 定义插入文本。 46、&lt;keygen&gt; 定义生成密钥。 47、&lt;label&gt; 定义表单控件的标注。 48、&lt;legend&gt; 定义 fieldset ...

    eWebEditor_V4.60

    &lt;br&gt; 您可以使用如下的方法分别调用不同的样式，示例：&lt;br&gt; &lt;iframe ID="eWebEditor1" src="ewebeditor.htm?id=content1&style=coolblue" frameborder="0" scrolling="no" width="500" HEIGHT="350"&gt;&lt;/iframe&gt;&lt;br&gt;...

    新浪博客在线编辑器

    新浪博客在线编辑器&lt;br&gt;1.添加时图片增加上传功能（ASP无组件上传）&lt;br&gt;2.IFRAME方式调用 用法类似eWebEditor&lt;br&gt; 调用方法：&lt;br&gt;&lt;input type="hidden" name="content" id="content"&gt;&lt;br&gt;&lt;iframe src="Edit/editor....

    思高自助友情链接系统 CycooLink V1.5

    你可以用两种方式在首页使用此系统：&lt;br&gt; ①包含文件：&lt;br&gt; &lt;iframe src="目录/link.asp" width=778 height=120 border=0 frameborder=0 marginheight="0" marginwidth="0" scrolling="no"&gt;&lt;/iframe&gt;&lt;br&gt; 其中高度...

    绝好的日期控件My97DatePicker3.0.1

    解决日期选择器被动态增加的iframe覆盖的问题&lt;br&gt;&lt;br&gt;演示地址:http://www.waytop.net/my97/datepicker/3.0/demo/index.htm&lt;br&gt;&lt;br&gt;相对2.1版,优化和修正的问题&lt;br&gt;&lt;br&gt;1.优化了速度和内存占用&lt;br&gt;2.增加realValue ...

    wdb易风改进版

    &lt;br&gt; &lt;br&gt; 基本特性：&lt;br&gt; 1、PHP4+文本，无需数据库&lt;br&gt; 2、高效率简洁的代码，力求算法优化&lt;br&gt; 3、基于Session的用户管理&lt;br&gt; &lt;br&gt; 主要功能：&lt;br&gt; -- JS+Iframe构成的短消息，使得窗口内出现小窗口，无需开启...

    My97DatePicker3.0.1

    功能强大的日期控件&lt;br&gt;My97日期控件 My97 DatePicker Ver 3.0.1&lt;br&gt;&lt;br&gt;3.0.1修正的问题&lt;br&gt;&lt;br&gt;1.修正与很多JS库(如prototype,JQuery,dwr等)的冲突问题&lt;br&gt;2.解决不能“后退”的问题 &lt;br&gt;3.解决IE6中,今天和选中的...

    全码 WDB 论坛

    基于Session的用户管理&lt;br&gt; &lt;br&gt; 细节(不可能写全,主要提供特殊的):&lt;br&gt; .JS+ Iframe构成的短消息,使得窗口内出现小窗口,无需开启另外窗口&lt;br&gt; .动态跳转页面,快速且美观&lt;br&gt; .独特算法.list级刷新速度和数据量无关...

Magicbox
Global site tag (gtag.js) - Google Analytics