Форум Сайтостроение Веб-строительство

DIV 100% height в ячейке таблицы. Помогите.

-YuRoK-
На сайте с 20.05.2006
Offline
94
-YuRoK-
1021

Столкнулся с такой проблемой. В таблице две ячейки по горизонтали. В одной из них какая-то информация, которая будет меняться, т.е. высота таблицы не задана. В другой карта google maps, которая должна тянуться по высоте другой ячейки (той, в которой будет информация). Но т.к. карта от гугл имеет вид <div id="map_canvas"></div>, то мне нужно, чтобы этот контейнер тянулся по высоте ячейки таблицы. Излазил весь интернет, но дельного решения так и не нашел. Нашел только, как сделать с помощью javascript (что, впрочем, меня не смущает), но работает он не совсем корректно. А именно, в IE6 на сайте почему-то совсем не работает (хотя если сделать простой пример в отдельном файле - работает, но не в этом суть), а в опере работает не так, как нужно.

Т.е. вся проблема в том, что в опере скрипт определяет высоту, когда страница еще не вся загрузилась (пока информация не вся загрузилась, т.к. там есть картинка, ячейка становится больше), а когда страница полностью загружается, то карта становится больше, что не есть хорошо и красиво. Пока сделал, чтобы скрипт считывал высоту таблицы каждую секунду, но как-то уж совсем мне не нравится такое решение.:gm: Собственно само решение: 

<script type="text/javascript">

function notie_height()

{

document.getElementById("map_canvas").style.height = (document.getElementById("tdmap").offsetHeight)+"px";

}

function wr_height()

{

notie_height()

setInterval("notie_height();",700);

}

if ( detectIE6() )

  {

  document.getElementById("map_canvas").style.height = (300)+"px";

  }

else

  {

  notie_height();

  wr_height();

  }

</script>

Сам я ни разу не программист и не яваскриптер, столкнулся с этим впервые, так что прошу у вас помощи, если знаете как сделать подругому или улучшить мое решение - подскажите плз, буду очень признателен.

Dreammaker
На сайте с 20.04.2006
Offline
569
Dreammaker
#1

-YuRoK-,

попробуйте

<div id="map_canvas">&nbsp;</div> или

<div id="map_canvas"> </div>

изредка проблемы бывают из-за пустых дивов. Но не факт, что проблема в этом случае такая же.

T.R.O.N
На сайте с 18.05.2004
Offline
314
T.R.O.N
#2

-YuRoK-,

Ничего не понял...

что мешает вызвать скрипт расчета высоты в самом конце страницы, а чтобы ячейка для карты не плавала, зафиксировать ее ширину рисунком с высотой 1px?

От воздержания пока никто не умер. Хотя никто и не родился! Prototype.js был написан теми, кто не знает JavaScript, для тех, кто не знает JavaScript (Richard Cornford)
T
На сайте с 27.06.2006
Offline
179
Trump
#3

Это не работает?

* html #map_canvas {

height: 100%;

}

Вообще в jQuery есть хорошая кроссбраузерная функция типа $('#map_canvas').height()

На чистом JavaScript функцию можете прикрутить как обработчик события при загрузке страницы.

-YuRoK-
На сайте с 20.05.2006
Offline
94
-YuRoK-
#4

Dreammaker, не помогло...

T.R.O.N, пробовал и в конец и сразу после таблицы... результат один и тот же.

T.R.O.N
На сайте с 18.05.2004
Offline
314
T.R.O.N
#5

Если продолжает корячить, то скорее всего у вас где-то путаница в DOM. ищите незакрытые теги или нарушения последовательностей

-YuRoK-
На сайте с 20.05.2006
Offline
94
-YuRoK-
#6

Пересмотрел еще раз код... Вроде все нормально...

Тогда подскажите плз, как сделать в ява скрипте, чтобы после, скажем 5 секунд скрипт переставал проверять и присваивать карте высоту? т.е. чтобы функция wr_height не выполнялась через 5 секунд после открытия страницы? А еще лучше после полной загрузки страницы (и картинок тоже)..

T
На сайте с 27.06.2006
Offline
179
Trump
#7

У вас в коде setInterval("notie_height();",700);

сделайте так,

var idis=setInterval("notie_height();",700);

А потом используйте clearInterval(idis)

Ну а при загрузке:

window.onload=notie_height;

-YuRoK-
На сайте с 20.05.2006
Offline
94
-YuRoK-
#8

Trump, а можно в двух словах то, что будет происходить... не совсем понял...

т.е. функцию заменяем на переменную.. и... что-то не пойму..

T
На сайте с 27.06.2006
Offline
179
Trump
#9

Вы прописали свою функцию расчета высоты, которая запускается через определенный промежуток времени пока её не остановишь.

Вы её можете остановить используя clearInterval, а можете, вместо этого тайминга прописать функцию, как обработчик события при загрузке страницы в window.onLoad = ИмяФункции;

Хотя, как мне кажется, вам нужно просто нормальный хак под IE сделать.

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий