`

<转>iframe去掉横向滚动条

阅读更多

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

做的那个管理界面,为了能让菜单在整个窗口中显示,我没有用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>

两种方法都可以搞定;

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

分享到:
评论

相关推荐

    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 如何去掉字符串中所有空格 ...

    layer弹出层 iframe层去掉滚动条的实例代码

    在这个问题中,我们关注的是如何在layer弹出层中的iframe层去除滚动条,以保持页面的整洁和用户体验。 首先,让我们深入理解一下涉及到的几个概念: 1. **layer**:Layer是基于jQuery的一个轻量级的弹窗插件,提供...

    网页制作经典技巧24条

    15. **控制滚动条**:使用CSS的`overflow`属性可以控制横向和纵向滚动条的显示与隐藏,如`overflow-y:hidden`去除Y轴滚动条,`overflow-x:hidden`去除X轴滚动条。 以上技巧是网页制作中常见的优化和设计手法,它们...

    JavaScript中关于iframe滚动条的去除和保留

    iframe嵌入页面后,我们有时需要调整滚动条,例如,去掉全部的滚动条,去掉右边的滚动条且保留底下的滚动条,去掉底下的滚动条且保留右边的滚动条。那么我们应该怎么做呢?  一:去掉全部的滚动条  第一个方法: ...

    css设置滚动条颜色与样式以及如何去掉与隐藏滚动条

    -- 去掉横向滚动条 --&gt; &lt;body style='overflow:scroll;overflow-y:hidden'&gt; &lt;!-- 去掉纵向滚动条 --&gt; ``` 此外,还可以使用`scrolling`属性,但这是HTML4中的非标准属性,主要用于IE浏览器: ```html &lt;iframe ...

    50条网页制作小技巧集锦.pdf

    例如,`overflow-y:hidden`用于隐藏垂直滚动条,`overflow-x:hidden`用于隐藏水平滚动条,而`&lt;body scroll="no"&gt;`则可以同时去掉两者。 2. **表格交互效果**:通过JavaScript事件处理,可以实现表格单元格(TD)的...

    《程序天下:JavaScript实例自学手册》光盘源码

    17.9 为textarea加横向滚动条 17.10 记录滚动条位置 17.11 彩色滚动条 17.12 Windows XP的滚动条 第18章 在线考题案例 18.1 在线考试代码 18.2 在线考试代码(二) 18.3 在线测试代码(三) 18.4 多选考试题 18.5 ...

    程序天下:JavaScript实例自学手册

    17.9 为textarea加横向滚动条 17.10 记录滚动条位置 17.11 彩色滚动条 17.12 Windows XP的滚动条 第18章 在线考题案例 18.1 在线考试代码 18.2 在线考试代码(二) 18.3 在线测试代码(三) 18.4 多选考试题 18.5 ...

Global site tag (gtag.js) - Google Analytics