Как заставить div уменьшаться и увеличиваться в зависимости от свободного места?

Для того чтобы див элемент изменял свой размер в зависимости от доступного места, можно использовать различные подходы на языке JavaScript.

1. Использование CSS свойств и Media Queries:
Для начала создаем стиль для нашего див элемента в CSS файле:

   #myDiv {
     width: 100%;
     height: 200px; /* начальная высота */
     background-color: red;
   }

Затем, в файле JavaScript, используем функцию window.matchMedia() для определения доступного места и добавляем слушателя события change, чтобы отслеживать изменения размеров окна:

   const divElement = document.querySelector('#myDiv'); // находим див элемент

   const mediaQuery = window.matchMedia('(max-width: 768px)'); // определяем медиазапрос

   function handleResize(mediaQuery) {
    if (mediaQuery.matches) {
        // Если медиазапрос срабатывает (экран уменьшается), изменяем высоту дива
        divElement.style.height = '100px'; // новая высота
    } else {
        // Если медиазапрос не срабатывает (экран увеличивается), снова изменяем высоту дива
        divElement.style.height = '200px'; // начальная высота
    }
   }

   handleResize(mediaQuery);
   mediaQuery.addListener(handleResize); // добавляем слушателя для отслеживания изменений размеров окна

В этом примере, при ширине экрана меньше или равной 768px, устанавливаем высоту дива в 100px, а при ширине экрана больше 768px - устанавливаем высоту дива в 200px.

2. Использование JavaScript с функцией onresize:
Данный подход используется, если нужно изменять размер дива непосредственно в момент изменения размеров окна.

   const divElement = document.querySelector('#myDiv');
  
   function handleResize() {
       const windowHeight = window.innerHeight; // текущая высота окна
       const divHeight = (windowHeight > 200) ? 200 : windowHeight; // новая высота дива

       divElement.style.height = divHeight + 'px'; // изменяем высоту дива
   }

   handleResize();
   window.onresize = handleResize; // добавляем обработчик события onresize для отслеживания изменений размеров окна

В этом примере, при изменении размеров окна, высота дива будет изменяться в зависимости от текущей высоты окна. Если высота окна больше 200px, то высота дива будет равняться 200px, в противном случае высота дива будет равняться текущей высоте окна.

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