Блог

Прямо сейчас высота элемента становится больше, если перетащить абсолютно расположенный блок из нижних координат. Почему по умолчанию он становится больше снизу?

В принципе, я пытаюсь реализовать возможность изменения размера терминала VSCode: изменение высоты путем перетаскивания элемента наверх.

HTML

 <div id="element">Element resizable</div>
 

CSS

 #element {
  position: relative;
  overflow: hidden;
  background: green;
  height: 200px;
  width: 500px;
  margin-top:100px;
 }
 

JS

 let element = document.getElementById('element');
let resizer = document.createElement('div');
resizer.className = 'resizer';
resizer.style.width = '500px';
resizer.style.height = '10px';
resizer.style.position = 'absolute';
resizer.style.left = 0;
resizer.style.background = 'red';
resizer.style.top = 0;
resizer.style.cursor = 'row-resize';
element.appendChild(resizer);
resizer.addEventListener('mousedown', initResize);

function initResize(e) {
   window.addEventListener('mousemove', Resize);
   window.addEventListener('mouseup', stopResize);
}
function Resize(e) {
 element.style.height = (e.clientY - element.offsetTop)   'px';
}
function stopResize(e) {
    window.removeEventListener('mousemove', Resize);
    window.removeEventListener('mouseup', stopResize);
}