DIV with overflow:auto and a 100% wide table

问题

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

回答1:

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

回答2:

Eran Galperin's solution fails to account for the fact that simply turning off horizontal scrolling will still allow the table to underlap the vertical scrollbar. I assume this is because IE is calculating the meaning of "100%" before deciding that it needs a vertical scrollbar, then failing to re-adjust for the remaining horizontal space available.

cetnar's solution above nails it, though:

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

This works properly on IE6 and 7 in my tests. From what I can tell, the "" hack doesn't appear to actually be necessary on IE6.

回答3:

Change:

overflow: auto;

to:

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

回答4:

Okay, this one plagued me for a LONG time. I have made far too many designs that have extra padding on the right, allowing for IEs complete disregard for their own scrollbar.

The answer is: nest two divs, give them both hasLayout, set the inner one to 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>

http://www.satzansatz.de/cssd/onhavinglayout.html
Go there to read more about having layout

回答5:

This is reported fixed in GWT trunk.

回答6:

If it's the body tag that insists on having the horizontal scroll (I guess because I have child elements set to 100%) you can add this to your CSS to fix the problem in IE7 (or 8 compatibility mode):

html{overflow-x:hidden;}

回答7:

This looks like it should fix your problem, as long as you are not apposed to condition statements. Fixing IE overflow

回答8:

Unfortunately, this is a quirk of IE. There's no way using pure XHTML and CSS to get it to work the same as Firefox.

You could do it using JavaScript to detect the size of the window and set the width of the table dynamically. I can add more detail on that if you really wanted to go that route.

来源：https://stackoverflow.com/questions/139000/div-with-overflowauto-and-a-100-wide-table

标签

html

internet-explorer

xhtml

html-table