带溢出的DIV：自动和100％宽的桌子 [英] DIV with overflow:auto and a 100% wide table
问题描述
我有一个绝对定位的DIV，在这个例子中，我填充了浏览器窗口。这个div具有overflow：auto属性，当内容太大而不能显示DIV时提供滚动条。
在DIV中，我有一个表格来显示一些数据，它的宽度是100％。
垂直内容过大时，我预计会出现垂直滚动条，并且表格会略微水平缩小以适应滚动酒吧。然而，在IE7中，水平滚动条也会出现，尽管div中的所有内容仍然有足够的空间水平。
这是IE特定的 - firefox的作品完美。
以下完整源代码。任何帮助不胜感激。
托尼
<！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>
#maxsize
{
position：absolute;
left：5px;
right：5px;
top：5px;
bottom：5px;
border：5px纯银;
溢出：auto;
}
< / style>
< / head>
< body>
< form id =form1runat =server>
< div id =maxsize>
< p>在垂直尺寸强制垂直滚动条
之前，这将是正确的。在这一点上，我希望表格可以重新设置
的大小，以考虑新的垂直滚动条。相反，
IE7保持表格的全尺寸并引入水平的
滚动条。
< / p>
< tbody>
< tr>
< td> A< / td>
< td> B< / td>
< td> C< / td>
< td> D< / td>
< td> E< / td>
< td> F< / td>
< td> G< / td>
< td> H< / td>
< td> I< / td>
< td> J< / td>
< td> K< / td>
< td> L< / td>
< td> M< / td>
< td> N< / td>
< td> O< / td>
< td> P< / td>
< td> Q< / td>
< td> R< / td>
< / tr>
< / tbody>
< / table>
< p>垂直调整浏览器窗口的大小，以便这些内容不再符合
的要求< / p>您好< / p>< p>您好< / p>< p>你好< / p>< p>你好< / p>< p>你好< / p>您好< / p>< p>您好< / p>< p>你好< / p>< p>你好< / p>< p>你好< / p>
< / div>
< / form>
< / body>
< / html>
新增03/16/16。 .. 认为可能有趣的是，GWT的源代码在评论中指出了这个问题... http://www.google.com/codesearch/p?hl=zh-CN#MTQ26449crI/com/google/gwt/user/client/ui/ScrollPanel.java&q=%22hack% 20％20％20％20％22％20滚动面板& sa = N& cd = 1& ct = rc& l = 48
我在IE7中遇到了过多的横杠问题。我已经使用D卡特的解决方案略有改变
< div style =zoom：1; overflow：auto;>
< div id =myDivstyle =zoom：1;>
< table style =width：100％...
...
< / table>
< / div>
< / div>
要在IE浏览器小于7的情况下工作，您需要添加：
<！ - [if lt IE 7]>< style> #myDiv {overflow：auto; }< / style><！[endif] - >
I hope someone might be able to help me here. I've tried to simplify my example as best I can.
I have an absolutely positioned DIV, which for this example I've made fill the browser window. This div has the overflow:auto attribute to provide scroll bars when the content is too big for the DIV to display.
Within the DIV I have a table to present some data, and it's width is 100%.
When the content becomes too large vertically, I expect the vertical scroll bar to appear and the table to shrink horizontally slightly to accommodate the scroll bar. However in IE7 what happens is the horizontal scroll bar also appears, despite there still being enough space horizontally for all the content in the div.
This is IE specific - firefox works perfectly.
Full source below. Any help greatly appreciated.
Tony
<!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>Table sizing bug?</title>
<style>
#maxsize
{
position: absolute;
left: 5px;
right: 5px;
top: 5px;
bottom: 5px;
border: 5px solid silver;
overflow: auto;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div id="maxsize">
<p>This will be fine until such time as the vertical size forces a
vertical scroll bar. At this point I'd expect the table to re-size
to now take into account of the new vertical scroll bar. Instead,
IE7 keeps the table the full size and introduces a horizontal
scroll bar.
</p>
<table width="100%" cellspacing="0" cellpadding="0" border="1">
<tbody>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
<td>D</td>
<td>E</td>
<td>F</td>
<td>G</td>
<td>H</td>
<td>I</td>
<td>J</td>
<td>K</td>
<td>L</td>
<td>M</td>
<td>N</td>
<td>O</td>
<td>P</td>
<td>Q</td>
<td>R</td>
</tr>
</tbody>
</table>
<p>Resize the browser window vertically so this content doesn't
fit any more</p>
<p>Hello</p><p>Hello</p><p>Hello</p><p>Hello</p><p>Hello</p>
<p>Hello</p><p>Hello</p><p>Hello</p><p>Hello</p><p>Hello</p>
</div>
</form>
</body>
</html>
added 03/16/10... thought it might be interesting to point out that GWT's source code points to this question in a comment... http://www.google.com/codesearch/p?hl=en#MTQ26449crI/com/google/gwt/user/client/ui/ScrollPanel.java&q=%22hack%20to%20account%20for%20the%22%20scrollpanel&sa=N&cd=1&ct=rc&l=48
I had a problem with excessive horizonal bar in IE7. I've used D Carter's solution slighty changed
<div style="zoom: 1; overflow: auto;">
<div id="myDiv" style="zoom: 1;">
<table style="width: 100%"...
...
</table>
</div>
</div>
To work in IE browser lesser than 7 you need add:
<!--[if lt IE 7]><style> #myDiv { overflow: auto; } </style><![endif]-->
这篇关于带溢出的DIV：自动和100％宽的桌子的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
