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>
最佳答案
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”的解答。不过应该是把overflow-y:scroll改成overflow-x:scroll，不然的话，结果就跟dudu给我的第二种解决方法一样，滚动条会在页面底部，会使整个页面滚动，而不仅仅是div内的table滚动。非常感谢你的提醒
其他回答(2)
0
overflow-y:hidden;
不行的，那样的话，就会有一部分垂直方向上，就会有一部分内容被隐藏而看不到了。我觉得就是IE6下，那个div高度不会自适应啊
@水无声:@水无声:把高度设置为100%解决这个问题，<body style="width:100%;height:100%">
<div style="width:100%;overflow:auto;height:100%" id="tableWrap">
这样也不行啊，那个div后面再有其他节点内容的话，那不是被挤到外面，而中间会留下一大段空白。。。
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>
楼主看下
