• Как сделать расширяющийся блок на css и наверное js?

    @hulq
    HTML:
    <body>
      <div id="k"></div>
    </body>


    CSS:
    #k {
      position: absolute;
      width: 100%;
      height: 100px;
      bottom: 0;
      background: green;
    }


    JS:
    const object = document.querySelector('#k');
    
    object.onmousedown = function(event) {
    
      let shiftY = event.clientY - object.getBoundingClientRect().height;
    
      object.style.zIndex = 1000;
      document.body.append(object);
    
      moveAt(event.pageY);
    
      function moveAt(pageY) {
        object.style.height = shiftY - pageY + 'px';
      }
    
      function onMouseMove(event) {
        moveAt(event.pageY);
      }
    
      document.addEventListener('mousemove', onMouseMove);
    
      object.onmouseup = function() {
        document.removeEventListener('mousemove', onMouseMove);
        object.onmouseup = null;
      };
    
    };
    
    object.ondragstart = function() {
      return false;
    };


    Как-то так
    Ответ написан
    Комментировать