解决方案一:
var
pageHeight
=
(document.body.clientHeight
?
document.body.clientHeight:document.documentElement.clientHeight);
<!
DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
>
<
html
xmlns
="http://www.w3.org/1999/xhtml"
>
BODY
{...}
{
FONT-SIZE: 12px;
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
width: 430px;/**//*就是这里了!*/
margin:0px;
padding:0px;
}
HTML,BODY
{...}
{
overflow-x:hidden;
}
解决方案四:
使用js代码自动调整B文件的宽度,B文件宽度减小之后,横向的滚动条自然就消失了。
注意:
1、 代码里有两段函数都叫expandWindow,你实际上只需要选择其中一个就行了。这只是同一函数的不同版本,上面的版本,我详细说明了每行代码的作用,下面的版本,我简化了一下,显得干净一些。
2、这段代码,是独立运行的,与A、C文件无关与A文件里的iframe的ID是什么也无关。这样的话,就与上面的“B文件部分代码”不完全一样了。 “B文件部分代码”需要兼顾A、C两种情况,所以它的代码很复杂。
3、 通常情况下,只需要下面这段代码就能解决问题了。推荐您使用下面的代码!
把下面的代码放到B文件(或者其它需要只显示纵向滚动条的网页)里,A网页打开之后,调用B网页,B页面打开之后,自动执行代码,横向滚动条自动消失。
<
script
language
="JavaScript"
type
="text/javascript"
>
...
//这是一个带说明的版本,后面还有一个非常干净的版本。
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
function expandWindow()...{//这个函数能调整本页面的宽度
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
try...{//使用try{}catch(d){}来捕捉错误,我不喜欢状态栏上那个黄色的惊叹号。
var pageWidth = 400;//我们将要把网页的宽度改成pageWidth大小。为了防止意外,我暂时将宽度设置为一个比较小的数。
if(document.documentElement&&(document.documentElement.clientWidth||document.documentElement.clientHeight))
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{//看看能不能取得document.documentElement.clientWidth的大小。
//document.documentElement.clientWidth = pageWidth;
//我曾经想过直接修改这个属性,可惜这个属性是只读的,不能斌值。
//alert(document.documentElement.clientWidth);
pageWidth = document.documentElement.clientWidth;
}
else if(document.body&&(document.body.clientWidth||document.body.clientHeight))
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{//尝试获得document.body.clientWidth。
//document.body.clientWidth = pageWidth;,这条也不行,同样是只读的。
pageWidth = document.documentElement.clientWidth;
}
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
if(document.body)...{
//尝试取得document.body,看看它是不是一个对象。如果它是一个对象object,那么就可以使用.width了。
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
if(document.body.style.width<pageWidth)...{//这时再检查一下,是我为了写这篇文章临时添加的。
document.body.style.width=pageWidth;//这个width是个读写的属性,修改它,网页的宽度就变了。
}
}
//alert(pageHeight);//调试程序用的,看看究竟页面被改成多大。
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
}catch(e)...{//捕捉错误
window.status+=e;//把错误显示在状态栏里
}
}
//下面是一个简洁、干净的版本。
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
function expandWindow()...{
var pageWidth = 400;
if(document.documentElement&&(document.documentElement.clientWidth||document.documentElement.clientHeight))
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{
pageWidth = document.documentElement.clientWidth;
}
else if(document.body&&(document.body.clientWidth||document.body.clientHeight))
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{
pageWidth = document.documentElement.clientWidth;
}
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
if(document.body)...{
document.body.style.width=pageWidth;
}
}
window.onload=expandWindow;//当页面全部打开之后执行函数。
</
script
>
去掉文件开头的文档声明。
不使用"DOCTYPE "文档声明(详细代码在下面)的话很容易就过去了。但是不使用文档声明,一是代码不规范,二是不能获得文档的高度。 下面的代码执行的结果是pageHeight=160px;,而实际上B文件的高度(长度)是800px左右。
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
--------
有关的文档声明:
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
---------------
解决方案二:
在B文档的css里定义body的width<437。但是这样就是固定了,也不太合适。只能用在一个文件里,在另一个文件的iframe 可能宽达500、600,但是B文件却被挤压到450,页面的一边或者两条出现大块的空白。
![](https://i-blog.csdnimg.cn/blog_migrate/a41954a27d6ad96fa2c2cf816e677448.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/1327ab569c1ae82736693a50b8e33378.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6a9c071a08f1dae2d3e1c512000eef41.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/7ff8d92cded7e0ce15e7ca1acc870052.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6a9c071a08f1dae2d3e1c512000eef41.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6a9c071a08f1dae2d3e1c512000eef41.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/0196c3df5ea9e936f21e9932cca91014.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
解决方案三:
在B文件的CSS中使用overflow。
使用overflow需要注意以下问题:
1、使用overflow之前看看网页的开头没有没使用文档声明,如果使用了文档声明,那么必须同时定义HTML和BODY两个标记。
2、overflow-x和overflow-y分别定义横向的滚动条和纵向的滚动条,但是它们是IE专有属性,只有在IE(4.0)以上的版本才能使用。
3、overflow-x: hidden;使用之后,有可能会被纵向的滚动条挡住右边一部分内容。
![](https://i-blog.csdnimg.cn/blog_migrate/a41954a27d6ad96fa2c2cf816e677448.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/1327ab569c1ae82736693a50b8e33378.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6a9c071a08f1dae2d3e1c512000eef41.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/0196c3df5ea9e936f21e9932cca91014.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
使用js代码自动调整B文件的宽度,B文件宽度减小之后,横向的滚动条自然就消失了。
注意:
1、 代码里有两段函数都叫expandWindow,你实际上只需要选择其中一个就行了。这只是同一函数的不同版本,上面的版本,我详细说明了每行代码的作用,下面的版本,我简化了一下,显得干净一些。
2、这段代码,是独立运行的,与A、C文件无关与A文件里的iframe的ID是什么也无关。这样的话,就与上面的“B文件部分代码”不完全一样了。 “B文件部分代码”需要兼顾A、C两种情况,所以它的代码很复杂。
3、 通常情况下,只需要下面这段代码就能解决问题了。推荐您使用下面的代码!
把下面的代码放到B文件(或者其它需要只显示纵向滚动条的网页)里,A网页打开之后,调用B网页,B页面打开之后,自动执行代码,横向滚动条自动消失。
![](https://i-blog.csdnimg.cn/blog_migrate/a41954a27d6ad96fa2c2cf816e677448.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/1327ab569c1ae82736693a50b8e33378.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6a9c071a08f1dae2d3e1c512000eef41.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/7ff8d92cded7e0ce15e7ca1acc870052.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/7ff8d92cded7e0ce15e7ca1acc870052.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6a9c071a08f1dae2d3e1c512000eef41.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6a9c071a08f1dae2d3e1c512000eef41.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/7ff8d92cded7e0ce15e7ca1acc870052.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6a9c071a08f1dae2d3e1c512000eef41.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6a9c071a08f1dae2d3e1c512000eef41.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6a9c071a08f1dae2d3e1c512000eef41.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6a9c071a08f1dae2d3e1c512000eef41.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/717446ca04a6125dc5b6b54e0fa14ab4.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6a9c071a08f1dae2d3e1c512000eef41.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/7ff8d92cded7e0ce15e7ca1acc870052.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6a9c071a08f1dae2d3e1c512000eef41.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6a9c071a08f1dae2d3e1c512000eef41.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/717446ca04a6125dc5b6b54e0fa14ab4.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/7ff8d92cded7e0ce15e7ca1acc870052.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6a9c071a08f1dae2d3e1c512000eef41.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/7ff8d92cded7e0ce15e7ca1acc870052.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6a9c071a08f1dae2d3e1c512000eef41.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/717446ca04a6125dc5b6b54e0fa14ab4.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/717446ca04a6125dc5b6b54e0fa14ab4.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6a9c071a08f1dae2d3e1c512000eef41.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/7ff8d92cded7e0ce15e7ca1acc870052.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6a9c071a08f1dae2d3e1c512000eef41.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/717446ca04a6125dc5b6b54e0fa14ab4.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/717446ca04a6125dc5b6b54e0fa14ab4.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6a9c071a08f1dae2d3e1c512000eef41.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/7ff8d92cded7e0ce15e7ca1acc870052.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6a9c071a08f1dae2d3e1c512000eef41.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6a9c071a08f1dae2d3e1c512000eef41.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/7ff8d92cded7e0ce15e7ca1acc870052.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6a9c071a08f1dae2d3e1c512000eef41.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/717446ca04a6125dc5b6b54e0fa14ab4.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6a9c071a08f1dae2d3e1c512000eef41.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/7ff8d92cded7e0ce15e7ca1acc870052.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6a9c071a08f1dae2d3e1c512000eef41.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/717446ca04a6125dc5b6b54e0fa14ab4.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/7ff8d92cded7e0ce15e7ca1acc870052.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6a9c071a08f1dae2d3e1c512000eef41.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/717446ca04a6125dc5b6b54e0fa14ab4.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/717446ca04a6125dc5b6b54e0fa14ab4.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/0196c3df5ea9e936f21e9932cca91014.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)