带溢出的 DIV：自动和 100% 宽的表答案

【问题标题】：DIV with overflow:auto and a 100% wide table带溢出的 DIV：自动和 100% 宽的表
【发布时间】：2010-09-13 10:21:48
【问题描述】：

我希望有人可以在这里帮助我。我已尽力简化示例。

我有一个绝对定位的 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>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>

添加 03/16/10... 认为在评论中指出 GWT 的源代码指向这个问题可能会很有趣...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

【问题讨论】：

标签： html internet-explorer xhtml html-table

【解决方案1】：

如果是 body 标签坚持水平滚动（我猜是因为我将子元素设置为 100%），您可以将其添加到您的 CSS 以解决 IE7（或 8 兼容模式）中的问题：

html{overflow-x:hidden;}

【讨论】：

【解决方案2】：

这是reported fixed in GWT trunk。

【讨论】：

【解决方案3】：

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 和 7 上正常运行。据我所知，在 IE6 上“” hack 似乎实际上并不需要。

【讨论】：

向不幸在 2012 年（或以后！）调查此问题的任何人澄清一下：关键是将 100% 宽度的表格包裹在一个带有 hasLayout 的元素中（例如，#myDiv in Joel 的示例，一个带有 zoom:1 的 div 来触发 hasLayout) 在带有溢出的滚动元素内部：auto。这会导致 IE 在考虑到垂直滚动条的宽度之后重新排列表格的宽度。

【解决方案4】：

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

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

要在小于 7 的 IE 浏览器中工作，您需要添加：

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

【讨论】：

嘿，GWT 使用这个答案并在他们的源代码中指向它。 :) google.com/codesearch/p?hl=en#MTQ26449crI/com/google/gwt/user/…
@Epaga。谢谢。很高兴知道:)

【解决方案5】：

好的，这个问题困扰了我很长时间。我做了太多右侧有额外填充的设计，让 IE 完全无视自己的滚动条。

答案是：嵌套两个div，都给hasLayout，设置里面的一个溢出。

<!-- 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>

http://www.satzansatz.de/cssd/onhavinglayout.html
去那里阅读更多关于布局的信息

【讨论】：

我认为哪个 div 设置了溢出并不重要。
@Chad：您能否提供一个小提琴，表明这确实适用于内部 div 上设置的溢出。因为这就是我需要的，而我只能让它反过来工作。

【解决方案6】：

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

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

【讨论】：

【解决方案7】：

变化：

overflow: auto;

到：

overflow-y:hidden;
overflow-x:auto;

【讨论】：

此方法抑制水平滚动条，但不会重绘内表的宽度。因此，当显示垂直滚动条时，内表的边缘被切断。这在您的布局中可能会或可能不会被接受。

【解决方案8】：

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

【讨论】：