DIV with overflow:auto and a 100% wide table-第2页回答

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