Нижний отступ не отображается, когда окно слишком маленькое - PullRequest
Новая
       20

Нижний отступ не отображается, когда окно слишком маленькое

0 голосов
/ 05 августа 2020

Я пытаюсь сделать так, чтобы вокруг всплывающего окна было лишнее пустое пространство, и я использую margin: auto; и position:relative;, чтобы центрировать его, потому что justify-content: center; не позволяет прокручивать вверх или вниз. Я много пробовал, позиционирование, нижние и верхние значения, но безуспешно. В этот момент мне пришлось приехать сюда. CSS не моя сила, что мне делать? 

@media screen and (max-height: 812px) {
  body .read {
    padding: 12px 0;
    overflow-y: scroll;
    justify-content: flex-start;
  }
  body .read div {
    height: auto;
    max-height: 812px;
    flex-shrink: 0;
    min-height: min-content;
  }
  body .read div:nth-child(1) {
    margin: auto;
  }
  body .read div .containerbox {
    height: 100px;
    min-height: auto;
    max-height: 420px;
  }
  body .read div .interact {
    height: auto;
    min-height: auto;
  }
}
<div class="read">
  <div>
    <h1>Message Title</h1>
    <h2>2020/08/01</h2>
    <h2>John</h2>
    <div class="containerbox">
      <h3>Message Text</h3>
    </div>
    <div class="interact">
      <button><h2>Reply</h2></button>
      <button><h2>Erase</h2></button>
      <button><h2>Close</h2></button>
    </div>
  </div>
</div>

1 Ответ

0 голосов
/ 05 августа 2020

Не уверен, что полностью понимаю вашу цель. Но я бы использовал следующее: 

  body .read div:nth-child(1) {
    margin: auto;
    margin-bottom: 12px;
  }
...