Для того чтобы див элемент изменял свой размер в зависимости от доступного места, можно использовать различные подходы на языке 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, в противном случае высота дива будет равняться текущей высоте окна.
Оба примера позволяют динамически изменять размеры дива в зависимости от доступного места на странице и реагировать на изменения размеров окна. Вы можете выбрать подход, который лучше всего соответствует вашим потребностям и требованиям.