У меня есть фиксированная боковая панель слева и справа столбец с парой карт, которые выровнены по вертикали.Как сделать так, чтобы правый столбец падал под боковую панель при изменении размера, чтобы боковая панель становилась верхней панелью с примерно 50% высоты области просмотра?
Я хочу сохранить соотношение текущего расстояния ичтобы содержимое оставалось вертикально выровненным.Также пытается сделать так, чтобы боковая панель больше не фиксировалась при изменении ее размера.
Вот скрипка: https://jsfiddle.net/snacks00/wLd67f1t/
body {
margin: 0;
}
.sidebar {
width: 40%;
height: 100vh;
text-align: center;
position: fixed;
background-color: #ffffff;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.05), 2px 2px 5px rgba(0, 0, 0, 0.1);
}
.right-column {
width: 60%;
display: inline-block;
height: 100%;
margin-left: 40%;
background-color: #F9F9F9;
}
.card {
display: flex;
border-radius: 4px;
padding: 10%;
margin: 10%;
background-color: #fff;
-moz-box-shadow: 0px 1px 5px #d3d3d3;
-webkit-box-shadow: 0px 1px 5px #d3d3d3;
}
@media (max-height: 45em) {
.sidebar {
height:500px;
display: inline-block;
position: fixed;
float: left;
}
}
<!DOCTYPE html>
<html lang="en">
<body>
<div class="sidebar">
<h2>Sidebar</h2>
</div>
<div class="right-column">
<div class="content" id="1">
<div class="card">
<p>Card number 1</p> </div>
</div>
<div class="content" id="2">
<div class="card">
<p>Card number 2</p> </div>
</div>
<div class="content" id="3">
<div class="card">
<p>Card number 3</p> </div>
</div>
<div class="content" id="4">
<div class="card">
<p>Card number 4</p> </div>
</div>
</div>
</body>
</html>