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

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

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

插入iFrame的代码如下(我没有设宽高，宽高有Js代码控制的，这里不再描述)
<iframe src="welcome.html" name="workArea" align="center" 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>

两种方法都可以搞定；

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

转载于:https://www.cnblogs.com/lizhao/archive/2010/04/20/1990470.html

iFrame只要竖滚动条，不要横滚动条相关推荐

html自定义横纵向滚动条,html的滚动条样式设置
如果需要对DIV设置一个滚动条,那么你可能需要设置滚动条的样式,横向或者纵向,需要用overflow-y和overflow-x来设置,今天就来给大家说一下这俩个属性. 对div设置滚动条,设置其横向滚 ...
完全搞定iframe（框架）里的滚动条！（一）
完全搞定iframe(框架)里的滚动条!(一) 说明: 1.本文参考了网络上大量资料,本人在此深表感谢! 2.本文假设读者,有一定的HTML.CSS.JS基础. 3.本文讨论的目标是,通过A页面里的& ...
html纵向滚动条隐藏,隐藏横向滚动条或纵向滚动条的解决方案
在WEB实际开发过程中,特别是在iframe引用其它网页时,可能大家遇到过这样的问题,当您的页面在框架中的时候,即使您的所有的控件的宽度都没有超过屏幕宽度(一般设置为100%),但横向滚动条依然出现. ...
html div 隐藏滚动条样式,div滚动条样式隐藏与显示
DIV滚动条样式是可以设置的,CSS滚动条同样也可以显示与隐藏,对div设置滚动条,设置其横向滚动条和纵向滚动条样式应该怎么做呢? 要设置CSS滚动条样式,需要用到overflow-y和overflo ...
extjs给panel添加滚动条_ExtJs Panel 滚动条设置
设置autoscroll:true同时出现横向和纵向滚动条. 不要设置autoscroll属性,或者autoscroll:false,然后设置bodyStyle : 'overflow-x:hidde ...
css自定义横向滚动条样式,css滚动条样式自定义
很简单的几行代码 Title * { margin: 0; padding: 0; } .out { width: 600px; height: 600px; margin: 100px auto; ...
el-tree 解决横向滚动条和纵向滚动条问题
如题,在el-tree所处的代码块中,加入滚动条,使其能够滚动使用overflow:scroll 即可 overflow定义:设定如果内容溢出元素设定范围后该怎么做. overflow:visibl ...
vuejs滚动条_Vue.js 桌面端虚拟滚动条|vue美化滚动条VScroll
介绍 VScroll 一款基于vue2.x构建的桌面PC端自定义模拟滚动条组件.支持自定义是否原生滚动条.自动隐藏.滚动条大小.层级及颜色等功能.拥有丝滑般的原生滚动条体验! 除了垂直滚动条,同样的也 ...
解决boostrap-table有水平和垂直滚动条时，滚动条滑到最右边表格标题和内容单元格无法对齐的问题
解决boostrap-table有水平和垂直滚动条时,滚动条滑到最右边表格标题和内容单元格无法对齐的问题参考文章: (1)解决boostrap-table有水平和垂直滚动条时,滚动条滑到最右边表格标 ...

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

iFrame只要竖滚动条，不要横滚动条相关推荐

最新文章

热门文章