Краткий обзор
В настоящее время я работаю над страницей, которая будет иметь три столбца в общем порядке слева направо:
- Список проектов
- Детали кода
- Окно кода
Теперь Project List и Code Details имеют max-width каждый из 600px, но должны быть 100% на мобильном телефоне, где порядок отображения будет Code Details -> Project List -> Code Window и все три должны вписаться в страницу, когда на рабочем столе. Это было утомительным занятием, но я почти на месте, я просто думаю, что что-то упустил.
Кроме того, это не совсем относится к этому посту, но я также использую Bootstrap 4, который может влиять или не влиять на реализацию решения (в настоящее время я не вижу причины, но включаю это на всякий случай ).
Выпуск
Мне нужно, чтобы Project List и Code Details были свернуты по умолчанию, а Code Window должен быть на полную ширину, когда оба свернуты. Затем, если отображаются Project List или Code Details, Code Window должен заполнить все оставшееся пространство справа. Это похоже на то, как Google использовал свои карты .
Я пробовал несколько подходов, и самым близким я был, создав один контейнер для двух левых столбцов и поместив Project List и Code Details в левый контейнер, тогда Code Window получит ширина 100%.
Я использую float: left в левом контейнере, а также Project List и Code Details (использование которых для дочерних элементов может быть проблемой, но удаление не решило проблему) и width: 100% на Code Widnow.
html, body {
height: 100%;
overflow: hidden;
}
.main-content {
display: flex;
width: 100%;
}
.left-content {
float: left;
}
.right-content {
width: 100%;
background-color: #5c7;
}
.project-list {
max-width: 200px;
float: left;
height: 100%;
overflow-x: hidden;
overflow-y: auto;
background-color: #f33;
}
.code-details {
max-width: 200px;
float: left;
height: 100%;
overflow-x: hidden;
overflow-y: auto;
background-color: #37f;
}
<div class="main-content">
<div class="left-content">
<div class="project-list">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lacus viverra vitae congue eu. Amet commodo nulla facilisi nullam vehicula. Ultrices mi tempus imperdiet nulla malesuada pellentesque. Quis commodo odio aenean sed adipiscing diam. Diam maecenas sed enim ut sem viverra. Lacus vestibulum sed arcu non odio euismod. Felis imperdiet proin fermentum leo vel orci porta non pulvinar. Dapibus ultrices in iaculis nunc. Felis donec et odio pellentesque. Diam sollicitudin tempor id eu nisl. Duis at consectetur lorem donec massa. Duis ultricies lacus sed turpis tincidunt id. Sagittis purus sit amet volutpat consequat mauris nunc. Enim lobortis scelerisque fermentum dui faucibus in ornare quam. Aenean euismod elementum nisi quis eleifend quam adipiscing vitae proin. Massa placerat duis ultricies lacus sed turpis tincidunt id aliquet.</p>
</div>
<div class="code-details">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lacus viverra vitae congue eu. Amet commodo nulla facilisi nullam vehicula. Ultrices mi tempus imperdiet nulla malesuada pellentesque. Quis commodo odio aenean sed adipiscing diam. Diam maecenas sed enim ut sem viverra. Lacus vestibulum sed arcu non odio euismod. Felis imperdiet proin fermentum leo vel orci porta non pulvinar. Dapibus ultrices in iaculis nunc. Felis donec et odio pellentesque. Diam sollicitudin tempor id eu nisl. Duis at consectetur lorem donec massa. Duis ultricies lacus sed turpis tincidunt id. Sagittis purus sit amet volutpat consequat mauris nunc. Enim lobortis scelerisque fermentum dui faucibus in ornare quam. Aenean euismod elementum nisi quis eleifend quam adipiscing vitae proin. Massa placerat duis ultricies lacus sed turpis tincidunt id aliquet.</p>
</div>
</div>
<div class="right-content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lacus viverra vitae congue eu. Amet commodo nulla facilisi nullam vehicula. Ultrices mi tempus imperdiet nulla malesuada pellentesque. Quis commodo odio aenean sed adipiscing diam. Diam maecenas sed enim ut sem viverra. Lacus vestibulum sed arcu non odio euismod. Felis imperdiet proin fermentum leo vel orci porta non pulvinar. Dapibus ultrices in iaculis nunc. Felis donec et odio pellentesque. Diam sollicitudin tempor id eu nisl. Duis at consectetur lorem donec massa. Duis ultricies lacus sed turpis tincidunt id. Sagittis purus sit amet volutpat consequat mauris nunc. Enim lobortis scelerisque fermentum dui faucibus in ornare quam. Aenean euismod elementum nisi quis eleifend quam adipiscing vitae proin. Massa placerat duis ultricies lacus sed turpis tincidunt id aliquet.</p>
</div>
</div>
При этой настройке левые столбцы перекрывают друг друга, а не накладываются друг на друга на рабочем столе. Я хочу, чтобы они накладывались на мобильные устройства, а не на настольные. Вы можете ясно увидеть этот эффект в приведенном выше примере.
Вопрос
Как сохранить функциональность , заполнить оставшуюся ширину и предотвратить наложение при наложении элементов div слева для отображения моих левых боковых панелей на рабочем столе? Позже я смогу позаботиться о дружбе с мобильными устройствами, но, думаю, на этом у меня появилось туннельное зрение.