DIV с переполнением: авто и таблица шириной 100%
Я надеюсь, что здесь кто-нибудь сможет мне помочь. Я попытался максимально упростить свой пример.
У меня есть абсолютно позиционированный 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>
добавлено 16.03.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
Ответы 8
Похоже, это должно решить вашу проблему, если вы не привязаны к операторам условия. Исправление переполнения IE
Изменять:
overflow: auto;
к:
overflow-y:hidden;
overflow-x:auto;
К сожалению, это причуда IE. Невозможно использовать чистый XHTML и CSS, чтобы заставить его работать так же, как Firefox.
Вы можете сделать это с помощью JavaScript, чтобы определить размер окна и динамически установить ширину таблицы. Я могу добавить более подробную информацию об этом, если вы действительно хотите пойти по этому пути.
Ладно, этот ДАЖЕ мучил меня. Я сделал слишком много дизайнов с дополнительным отступом справа, что позволяет 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. Потому что это то, что мне нужно, тогда как я могу заставить его работать только наоборот.
У меня была проблема с чрезмерной горизонтальной полосой в IE 7. Я использовал решение 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]-->
эй, GWT использует этот ответ и указывает на него в своем исходном коде. :) google.com/codesearch/p?hl=en#MTQ26449crI/com/google/gwt/use r /…
@Epaga. Спасибо. Хорошо знать :)
Решение Эрана Гальперина не учитывает тот факт, что простое отключение горизонтальной прокрутки по-прежнему позволяет таблице перекрывать вертикальную полосу прокрутки. Я предполагаю, что это связано с тем, что 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 не нужен.
Чтобы прояснить для всех, кому не повезло разобраться в этом в 2012 году (или позже!): Ключ в том, что ваша таблица ширины 100% обернута в элемент с hasLayout (например, #myDiv в примере Джоэла, div с масштабированием: 1 для запуска hasLayout) ВНУТРИ элемента прокрутки с overflow: auto. Это заставляет IE перекомпоновывать ширину таблицы ПОСЛЕ, принимая во внимание ширину вертикальной полосы прокрутки.
Если это тег body, который настаивает на горизонтальной прокрутке (я думаю, потому что у меня дочерние элементы установлены на 100%), вы можете добавить это в свой CSS, чтобы исправить проблему в IE7 (или в режиме совместимости 8):
html{overflow-x:hidden;}
Этот метод подавляет горизонтальные полосы прокрутки, но не перерисовывает ширину внутренней таблицы. Поэтому, когда отображаются вертикальные полосы прокрутки, край внутренней таблицы обрезается. Это может быть приемлемым или неприемлемым в вашем макете.