Как заставить div уменьшаться и увеличиваться в зависимости от свободного места?
Есть такая конструкция:
<div class="main-container"> <div class="sidebar" onclick="openSideBar()"> ..... </div> <div class="content"> </div> </div> <script> const sidebar = document.querySelector(".sidebar") let state = true function openSideBar(){ if(state){ sidebar.classList.add("open") state = false } else{ sidebar.classList.remove("open") state=true } } </script> |
<div class="main-container"> <div class="sidebar" onclick="openSideBar()"> ..... </div> <div class="content"> </div> </div> <script> const sidebar = document.querySelector(".sidebar") let state = true function openSideBar(){ if(state){ sidebar.classList.add("open") state = false } else{ sidebar.classList.remove("open") state=true } } </script>
.sidebar{ background-color: red; min-width: 80px; height: 100vh; position: relative; } .sidebar.open{ min-width: 190px; } |
.sidebar{ background-color: red; min-width: 80px; height: 100vh; position: relative; } .sidebar.open{ min-width: 190px; }
сайд бар изменяет свою ширину при нажатии, как заставить content изменить свой размер когда сайд бар открыт и при этом что бы контент не вылазил за main
Дополнительно:
.main-container display: flex .content flex: auto |
.main-container display: flex .content flex: auto
Проблема то в чём?
- проблема в отсутствии теоретических знаний. они на уровне около нуля.
можно поставить проценты размера:
.sidebar { background-color: red; width: 10%; height: 100vh; position: relative; transition: width 0.3s; } .sidebar.open { width: 25%; } |
.sidebar { background-color: red; width: 10%; height: 100vh; position: relative; transition: width 0.3s; } .sidebar.open { width: 25%; }
- Только ещё ховер положи, и добавь как хочешь размер.
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для того чтобы заставить элемент div изменять свой размер в зависимости от доступного свободного места, можно использовать CSS свойства flex и flex-grow.
Прежде всего, необходимо создать контейнер, в котором будет находиться элемент div. Например:
<div class="container"> <div class="flexible-div">Текст или контент</div> </div>
Затем, применим следующие стили к контейнеру и элементу div:
.container { display: flex; justify-content: center; align-items: center; height: 400px; /* высота контейнера */ } .flexible-div { flex: 1; /* устанавливаем гибкость элемента */ max-width: 80%; /* максимальная ширина элемента */ min-width: 20%; /* минимальная ширина элемента */ text-align: center; /* выравнивание текста по центру */ }
В данном примере, свойство flex: 1; для элемента div позволяет ему занимать всю доступную ширину контейнера. При этом, указание максимальной и минимальной ширины позволяет контролировать изменение размеров элемента в зависимости от доступного места.
Таким образом, при изменении размеров окна браузера или других факторов, элемент div будет автоматически уменьшаться или увеличиваться, сохраняя при этом свою центральную позицию в контейнере.
Надеюсь, данное решение поможет вам сделать элемент div гибким и адаптивным к различным условиям отображения контента.