Html 带溢出的DIV:auto和100%宽的表

我希望有人能在这里帮助我。我尽量简化我的例子

我有一个绝对定位的DIV，在本例中，我将其填充到浏览器窗口中。此div具有overflow:auto属性，用于在内容太大而无法显示时提供滚动条

在DIV中，我有一个表来显示一些数据，它的宽度是100%

当内容在垂直方向上变得太大时，我希望垂直滚动条会出现，而表格会在水平方向上稍微收缩以容纳滚动条。然而，在IE7中，水平滚动条也会出现，尽管在水平方向上仍有足够的空间容纳div中的所有内容

这是IE特有的——firefox可以完美地工作

完整来源如下。非常感谢您的帮助

托尼

表大小错误？
#最大尺寸
{
位置：绝对位置；
左：5px；
右：5px；
顶部：5px；
底部：5px；
边框：5px纯银；
溢出：自动；
}
在垂直尺寸强制a之前，这是可以接受的
垂直滚动条。在这一点上，我希望桌子重新调整大小
现在要考虑新的垂直滚动条。相反
IE7保持了表格的完整尺寸，并引入了水平
滚动条。

A.
B
C
D
E
F
G
H
我
J
K
L
M
N
O
P
Q
R
垂直调整浏览器窗口的大小，使此内容不会
再合适吗

你好
你好
你好
你好
你好
你好

你好
你好
你好
你好
你好
你好

---

---

于2010年3月16日添加…认为指出GWT的源代码在评论中指向这个问题可能很有趣

这看起来应该可以解决您的问题，只要您不使用条件语句

变化：

overflow: auto;

致：

---

不幸的是，这是IE的一个怪癖。没有办法使用纯XHTML和CSS让它与Firefox一样工作

---

您可以使用JavaScript来检测窗口的大小并动态设置表的宽度。如果你真的想走这条路，我可以补充更多细节。

好吧，这条路一直困扰着我。我已经做了太多的设计，在右边有额外的填充，允许IEs完全忽略他们自己的滚动条

答案是：嵌套两个div，将它们都设置为hasLayout，将内部的一个设置为overflow

<!-- zoom: 1 is a proprietary IE property.  It doesn't really do anything here, except give hasLayout -->

<div style="zoom: 1;">
   <div style="zoom: 1; overflow: auto">
      <table style="width: 100%"...
      ...
      </table>
   </div>
</div>

我在IE7中遇到了水平条过多的问题。我用的是D Carter的解决方案稍有改变

<div style="zoom: 1; overflow: auto;">
   <div id="myDiv" style="zoom: 1;">
      <table style="width: 100%"...
      ...
      </table>
   </div>
</div>

Eran Galperin的解决方案无法解释这样一个事实，即简单地关闭水平滚动仍将允许表格在垂直滚动条下方。我认为这是因为IE在决定它需要一个垂直滚动条之前，正在计算“100%”的含义，然后未能重新调整剩余的可用水平空间

但cetnar的解决方案解决了这一问题：

<div style="zoom: 1; overflow: auto;">
   <div id="myDiv" style="zoom: 1;">
      <table style="width: 100%">
      ...
      </table>
   </div>
</div>


...

在我的测试中，这在IE6和IE7上正常工作。据我所知，在IE6上实际上似乎没有必要使用“”hack。
这是。
如果是body标签坚持使用水平滚动（我猜是因为我将子元素设置为100%），您可以将其添加到CSS中，以在IE7（或8兼容模式）中修复问题：

嘿，GWT使用这个答案，并在源代码中指出它。：）@埃帕加。谢谢很高兴知道：）我认为哪个div有溢出设置并不重要。@Chad：你能不能提供一把小提琴，表明这对内部div上的溢出设置有效。因为这正是我需要的，而我只能让它以另一种方式工作。为那些不幸的人澄清一下，让他们在2012年（或以后）研究这个问题：关键是将100%宽度的表格包装在一个带有hasLayout的元素中（例如，Joel示例中的一个#myDiv，一个带有zoom:1的div以触发hasLayout），并在带有overflow:auto的滚动元素中。这会导致IE在考虑垂直滚动条的宽度后重新流化表格的宽度。此方法会抑制水平滚动条，但不会重新绘制内部表格的宽度。因此，当显示垂直滚动条时，内部表格的边缘被切断。这在您的布局中可能是可接受的，也可能是不可接受的。
<div style="zoom: 1; overflow: auto;">
   <div id="myDiv" style="zoom: 1;">
      <table style="width: 100%"...
      ...
      </table>
   </div>
</div>

<!--[if lt IE 7]><style> #myDiv { overflow: auto; } </style><![endif]-->

<div style="zoom: 1; overflow: auto;">
   <div id="myDiv" style="zoom: 1;">
      <table style="width: 100%">
      ...
      </table>
   </div>
</div>

html{overflow-x:hidden;}