DIV с переполнением: авто и стоп на 100%

Я надеюсь, что кто-то сможет мне помочь здесь. Я попытался упростить свой пример, насколько это возможно.

У меня есть абсолютно позиционированный DIV, который для этого примера я заполнил окно браузера. Этот div имеет атрибут переполнения: 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

Ответы

Ответ 1

У меня была проблема с чрезмерной горизонтальной полосой в IE7. Я использовал решение D Carter, слегка изменившееся

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

Чтобы работать в браузере IE менее 7, вам нужно добавить:

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

Ответ 2

Решение Эрана Гальперин не учитывает тот факт, что простое отключение горизонтальной прокрутки по-прежнему позволяет таблице перекрывать вертикальную полосу прокрутки. Я предполагаю, что это потому, что 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.

Ответ 3

Изменить:

overflow: auto;

в

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

Ответ 4

Хорошо, этот меня мучил долгое время. Я сделал слишком много проектов, у которых есть дополнительное дополнение справа, что позволяет IE полностью игнорировать их собственную полосу прокрутки.

Ответ: вставьте два divs, дайте им как 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
Пойдите туда, чтобы узнать больше о макете

Ответ 6

Если это тег тела, который настаивает на горизонтальном прокрутке (я думаю, потому что у меня есть дочерние элементы, установленные на 100%), вы можете добавить это в свой CSS, чтобы исправить проблему в IE7 (или в 8 режимах совместимости):

html{overflow-x:hidden;}

Ответ 8

К сожалению, это причуда IE. Нет способа использовать чистые XHTML и CSS, чтобы заставить его работать так же, как Firefox.

Вы можете сделать это с помощью JavaScript, чтобы определить размер окна и динамически установить ширину таблицы. Я могу добавить более подробную информацию об этом, если вы действительно хотели пойти по этому маршруту.