На рисунке показано, что в Mozilla div увеличился и вышел за пределы страницы, полоса прокрутки в нём не появилась. В остальных браузерах элемент отображается правильно. Код страницы выглядит так:
<body>
<table width="100%" height="100%">
<tr>
<td></td>
<td width="300">
<div id="d1" style="width: 100%; height: 100%; overflow: auto; border: solid;">
Большой текст или большой дочерний элемент.
</div>
</td>
</tr>
</table>
</body>
Я долго искал решение в CSS, но не нашёл. Поэтому пришлось решать проблему через JavaScript. В моём случае было несколько div с обозначенной проблемой, поэтому код написан для любого количества элементов:
//Массив с id элементов, размер которых нужно контролировать
var resizes = new Array("d1", "d2", "d3");
//Функция для правильного изменения размеров
function AutoSize()
{
if(IsMozilla())
{
//Два цикла нужны для корректного изменения размеров
//В противном случае элементы растягивают друг друга
for (var i = 0; i < resizes.length; i++)
{
var obj = document.getElementById(resizes[i]);
obj.style.height = '1px';
}
for (var i = 0; i < resizes.length; i++)
{
var obj = document.getElementById(resizes[i]);
obj.style.height = obj.parentNode.offsetHeight;
}
}
}
//Функция для определения того, что сайт запущен в Mozilla
function IsMozilla()
{
var brow = navigator.userAgent.toLowerCase();
return (brow.indexOf("gecko") >= 0 && brow.indexOf("chrome") < 0 && brow.indexOf("safari") < 0);
}
Функцию AutoSize нужно вызвать при загрузке страницы и изменении её размера:
<body onLoad="AutoSize();" onResize="AutoSize();">
Пока с этим кодом у меня никаких проблем не было. Всё исправно работает.
Комментариев нет:
Отправить комментарий