HTML+CSS+JavaScript

Можно ли как-то менять высоту DIV при помощи мышки?

Можно.

Спасибо, я очень рад! : )
А можно подробней?
Может, скрипт попадался такой, чтобы хватать за край DIV , и тянуть вверх-вниз?

"Хватать за край DIV" не получится.
Вместо "края" надо использовать еще один DIV (толщиной 1-2 пикселя), за который можно "ухватиться".

Скрипт смотрите, например, здесь - http://www.softtime.ru/forum/read.php?id_forum=4&id_theme=68725

Хороший скрипт!
Но у меня не вполне получается его приспособить.
Если DIV, размер которого надо менять, изначально пустой,то работает без проблем,
но если у DIV есть содержимое, то полоска, за которую на до хватать убегает далеко от
дива, размер которого я собрался менять.

<script>  var t = 'mouse', m = t + 'move', M = 'on' + m, u = t + 'up', U = 'on' + u, b = false, d = document;  function fWrk (e)  {  var E = window.event || e, L = E.pageY || (E.clientY + d.body.scrollDown);  d.getElementById ('splitter').style.top = L + 'px';  d.getElementById ('resizable').style.height = L + 'px';  }  function fAdd ()  {  if (d.addEventListener) {d.addEventListener (m, fWrk, b); d.addEventListener (u, fDel, b)}  else if (d.attachEvent) {d.attachEvent      (M, fWrk, b); d.attachEvent      (U, fDel, b)}  }  function fDel ()  {  if (d.addEventListener) {d.removeEventListener (m, fWrk, b); d.removeEventListener (u, fDel, b)}  else if (d.attachEvent) {d.detachEvent         (M, fWrk, b); d.detachEvent         (U, fDel, b)}  }  </script>  <style>  #splitter {height: 4px; width: 400px; background-color: red; position: relative; cursor: e-resize}  #resizable {height: 4px; width: 400px; background-color: green;  }  </style>  <div id="resizable"> my <br> text <br> here <br> <br> </div> <div id="splitter" onmousedown="fAdd ()">

scrollDown - это песец! :-))))))))))))))))))))))))))))))))))))))))))))))))))

Извините, конечно:

.body.scrollHeight

Но, очевидно, не в этой ошибке проблема.
Я не могу соотнести значения свойств и то, что вижу на экране.
Значения присваиваются одинаковые:

d.getElementById ('splitter').style.top = L + 'px';  d.getElementById ('resizable').style.height = L + 'px';

Но почему-то на экране возникает отличие...

scrollHeight - это тоже песец! Только нумер ДВА :-))))))))))))))))))))))))))))

Вы видимо, большой специалист по "песцам" : )
Я даже разобрался в основной своей проблеме, она возникала
Из-за относительного позиционирования.
Вот так работает:

<script>  var t = 'mouse', m = t + 'move', M = 'on' + m, u = t + 'up', U = 'on' + u, b = false, d = document;  function fWrk (e)  {  var E = window.event || e, L = E.pageY || (E.clientY + d.body.scrollHeight);  d.getElementById ('resizable').style.height = L + 'px'; if( d.getElementById ('resizable').style.height < L + 'px' )         d.getElementById ('splitter').style.top = L + d.getElementById ('splitter').style.height +'px';  }  function fAdd ()  {  if (d.addEventListener) {d.addEventListener (m, fWrk, b); d.addEventListener (u, fDel, b)}  else if (d.attachEvent) {d.attachEvent      (M, fWrk, b); d.attachEvent      (U, fDel, b)}  }  function fDel ()  {  if (d.addEventListener) {d.removeEventListener (m, fWrk, b); d.removeEventListener (u, fDel, b)}  else if (d.attachEvent) {d.detachEvent         (M, fWrk, b); d.detachEvent         (U, fDel, b)}  }  </script>  <style>  #splitter {height: 4px; width: 400px; background-color: red; position: absolute; cursor: s-resize}  #resizable {height: 4px; width: 400px; background-color: green;  }  </style>  <div id="resizable">     my<br>text<br>here<br><br> </div> <div id="splitter" onmousedown="fAdd ()">

Спасибо!

Но насчёт scrollHeight - я уж и не знаю что сказать.
посмотрел в справочнике. В нём этот "песец" описывается.
Куда мне ещё смотреть?

Ещё есть свойство scrollTop - наверно оно правильное