Попытаюсь объяснить, что я имею ввиду.
У нас есть блок .modal
, он служит затемнением фона, внутри данного блока находится блок .modal__content
, в котором может находится что угодно, любой высоты. Нужно чтобы блок .modal
имел полосу прокрутки, если .modal__content
не вмещается в видимую область. Но происходит то, что .modal__content
выходит за верхнюю границу браузера и не видно, что там находится.
Правильно поведение, но блок .modal__content
не центрируется по вертикали.
body
{
margin: 0;
color: #ACACAC;
}
.modal {
box-sizing: border-box;
z-index: 9999;
display: none;
position: fixed;
overflow-y: auto;
top: 0;
bottom: 0;
width: 100%;
padding: 20px;
background-color: rgba(0, 0, 0, 0.65);
backdrop-filter: blur(2px);
align-items: center;
flex-direction: column;
}
.modal--open
{
display: flex;
}
.modal__content
{
max-width: 800px;
width: 100%;
border: 1px solid red;
}
.modal__header
{
height: 50px;
background-color: #484848;
}
.modal__body
{
min-height: 200px;
background-color: #252525;
}
<div class="modal modal--open">
<div class="modal__content">
<div class="modal__header">Заголовок</div>
<div class="modal__body">Контент</div>
</div>
</div>
Не правильное поведение, блок центрируется по центру, но обрезается сверху, если не влазит по высоте.
body
{
margin: 0;
color: #ACACAC;
}
.modal {
box-sizing: border-box;
z-index: 9999;
display: none;
position: fixed;
overflow-y: auto;
top: 0;
bottom: 0;
width: 100%;
padding: 20px;
background-color: rgba(0, 0, 0, 0.65);
backdrop-filter: blur(2px);
align-items: center;
justify-content: center; /* Так мы центрируем */
flex-direction: column;
}
.modal--open
{
display: flex;
}
.modal__content
{
max-width: 800px;
width: 100%;
border: 1px solid red;
}
.modal__header
{
height: 50px;
background-color: #484848;
}
.modal__body
{
min-height: 200px;
background-color: #252525;
}
<div class="modal modal--open">
<div class="modal__content">
<div class="modal__header">Заголовок</div>
<div class="modal__body">Контент</div>
</div>
</div>
Видео работы реальной модалки: Видео на YouTube
В начале видео, как должна работать модалка (Если не использовать justify-content: center для центрирования по вертикали), во второй части - как работает с данным свойством (то есть , обрезается верх).