首页 新闻 搜索 专区 学院

IE下 div 滚动条问题

0
悬赏园豆:20 [已解决问题] 解决于 2010-07-26 22:18

div的width为100%,height不设置,当他里面的内容的宽度超出div的宽度时,IE6下,该div会出现水平滚动条和垂直滚动条,而在IE8,chrome,ff下,高度会自适应,只会出现水平滚动条。请问如何能使IE6也只出现水平滚动条。

测试代码如下:

代码
<!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">
<head>
<style type="text/css">
*{padding:0; margin:0;}
</style>
</head>

<body style="width:100%;">
<div style="width:100%;overflow:auto;" id="tableWrap">
</div>
<script type="text/javascript">
var html
="<table style='width:100%;'>";
var rowHtml
= [];
for(var row=0; row<20; row++){
var colHtml
= [];
for(var col=0; col<50; col++){
colHtml.push(
"" + row + "行,第"+ col + "" );
}
rowHtml.push(
"<tr><td style='white-space:nowrap;border:1px solid gray;'>" + colHtml.join("</td><td style='white-space:nowrap;border:1px solid gray;'>") + "</td</tr>");
}
var table
= "<table style='width:100%; border:1px solid gray; border-collapse:collapse;'>" + rowHtml.join('') + "</table>";
document.getElementById(
"tableWrap").innerHTML = table;
</script>
</body>
</html>

 

水无声的主页 水无声 | 初学一级 | 园豆:92
提问于:2010-07-26 10:35
< >
分享
最佳答案
0

以下代码,ie6 、IE8、chrome、ff均无问题

代码
<!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">
<head runat="server">
<title>无标题页</title>
<style type="text/css">
*
{
padding:
0;
margin:
0;
}
</style>
</head>
<body>
<div style="width: 100%; overflow-y: scroll;" id="tableWrap">
</div>

<script type="text/javascript">
var html
="<table>";
var rowHtml
= [];
for(var row=0; row<30; row++){
var colHtml
= [];
for(var col=0; col<8; col++){
colHtml.push(
"" + row + "行,第"+ col + "" );
}
rowHtml.push(
"<tr><td style='white-space:nowrap;border:1px solid gray;'>" + colHtml.join("</td><td style='white-space:nowrap;border:1px solid gray;'>") + "</td</tr>");
}
var table
= "<table style='width:100%; border:1px solid gray; border-collapse:collapse;'>" + rowHtml.join('') + "</table>";
document.getElementById(
"tableWrap").innerHTML = table;
</script>

</body>
</html>
收获园豆:20
eng308 | 菜鸟二级 |园豆:250 | 2010-07-26 15:35
谢谢“eng308”的解答。不过应该是把overflow-y:scroll改成overflow-x:scroll,不然的话,结果就跟dudu给我的第二种解决方法一样,滚动条会在页面底部,会使整个页面滚动,而不仅仅是div内的table滚动。非常感谢你的提醒
水无声 | 园豆:92 (初学一级) | 2010-07-26 22:14
其他回答(2)
0

overflow-y:hidden;

dudu | 园豆:37778 (高人七级) | 2010-07-26 10:54
不行的,那样的话,就会有一部分垂直方向上,就会有一部分内容被隐藏而看不到了。我觉得就是IE6下,那个div高度不会自适应啊
支持(0) 反对(0) 水无声 | 园豆:92 (初学一级) | 2010-07-26 11:01
@水无声:@水无声:把高度设置为100%解决这个问题,<body style="width:100%;height:100%"> <div style="width:100%;overflow:auto;height:100%" id="tableWrap">
支持(0) 反对(0) dudu | 园豆:37778 (高人七级) | 2010-07-26 11:36
这样也不行啊,那个div后面再有其他节点内容的话,那不是被挤到外面,而中间会留下一大段空白。。。
支持(0) 反对(0) 水无声 | 园豆:92 (初学一级) | 2010-07-26 11:48
0
IE FF 都正常
 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
5 <style type="text/css">
6 *{padding:0; margin:0;}
7 body,html{ height:100%;}
8 </style>
9 </head>
10
11 <body style="width:100%;">
12 <div style="width:100%; overflow-x: scroll;" id="tableWrap">
13 </div>
14 <script type="text/javascript">
15 var html="<table style='width:100%; height:100%;'>";
16 var rowHtml = [];
17 for(var row=0; row<20; row++){
18 var colHtml = [];
19 for(var col=0; col<50; col++){
20 colHtml.push(""+ row +"行,第"+ col +"");
21 }
22 rowHtml.push("<tr><td style='white-space:nowrap;border:1px solid gray;'>"+ colHtml.join("</td><td style='white-space:nowrap;border:1px solid gray;'>") +"</td</tr>");
23 }
24 var table ="<table style='width:100%; border:1px solid gray; border-collapse:collapse;'>"+ rowHtml.join('') +"</table>";
25 document.getElementById("tableWrap").innerHTML = table;
26 </script>
27 </body>
28 </html>

楼主看下

王那个锋啊 | 园豆:311 (菜鸟二级) | 2012-01-12 11:32
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册