-1

Попытаюсь объяснить, что я имею ввиду.
У нас есть блок .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 для центрирования по вертикали), во второй части - как работает с данным свойством (то есть , обрезается верх).

11
  • Обоснуйте минус. 7 апр 2022 в 20:02
  • Да вы смеетесь? То есть вы задали определённую в пикселях величину отступов, определенную высоту, - в пикселях снова, замечу! И ожидаете, что на маленьком экране будет выглядеть так же, как и на крупном?
    – Great Tech
    7 апр 2022 в 20:03
  • Нет, я ожидаю увидеть прокрутку, это же логично. 7 апр 2022 в 20:04
  • Как по мне, ваш вопрос подразумевает, что окно закономерно не умещается на странице. В любом случае, вы сделали элемент с зафиксированной позицией. Как по-вашему он тогда будет прокручиваться? Он не состоит позиционно теперь в body, на ширину его не влияет. Может, вы хотели сделать прокручивающийся контент в модальном окне? Вам для начала нужно сделать адекватный размер модального окна, чтобы оно не торчало за пределы body, а потом уже решать проблемы с прокруткой в этом модальном окне.
    – Great Tech
    7 апр 2022 в 20:14
  • "Может, вы хотели сделать прокручивающийся контент в модальном окне?" - так это и пытается сделаться, как видите у .modal есть overflow: auto, что и создает скролл (видно, что можно прокрутить до нижней границы, даже с отступами), но верх модального окна уходит за верхнюю границу. И это только, если контент выше окна браузера. Причем тут размеры? Причем? Ну чего вы вечно пытаетесь казаться такими умными и пишите такую фигню? 7 апр 2022 в 20:17

1 ответ 1

0

Просто уберите отступы в пикселах

.modal {
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  overflow-y: auto;
  width: 100vw;
  min-height: 100vh;
  background-color: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(2px);
}

.modal__content
{
  width: 60%;
  border: 1px solid red;
}

.modal__header
{
  height: 50px;
  width: 100%;
  background-color: #484848;
}

.modal__body
{
  width: 100%;
  min-height: 200px;
  background-color: #252525;
}
<div class="modal">
  <div class="modal__content">
    <div class="modal__header">       </div>
    <div class="modal__body">         </div>
  </div>
</div>

3
  • Я добавил вариант без отступов, чем это помогло? 7 апр 2022 в 20:11
  • В текущем виде ваш ответ непонятен. Пожалуйста, нажмите править под сообщением, чтобы добавить больше подробностей, которые помогут другим понять, как он отвечает на заданный вопрос. Вы можете найти больше информации о том, как писать хорошие ответы в Справке. 7 апр 2022 в 20:14
  • overflow если я вас правильно понял нужно вешать на дочерний блок modal__body 7 апр 2022 в 20:20

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.