CSS3 - предотвращение роста всплывающего тела по его содержимому - PullRequest
Новая
       8

CSS3 - предотвращение роста всплывающего тела по его содержимому

0 голосов
/ 23 февраля 2020

Я кодирую всплывающее окно, похожее на следующее изображение:

enter image description here

И это мой css пример кода. 

html,
body {
  height : 100%;
}

#modal {
  position: absolute;
  top : 0;
  bottom : 0;
  left : 0;
  right : 0;
  background-color: rgba(0, 0, 0, 0.8);
}

.modal-box {
  height : 100%;
  width : 400px;
  background-color: #FFF;
  margin-left : auto;
  display : table;
  table-layout : fixed;
}

.modal-header,
.modal-body,
.modal-footer {
  display : table-row;
}

.modal-body {
  height : 100%;
}

.body-content {
  display : table-cell;
  vertical-align : middle;
  height : 100%;
  overflow : auto;
}
<html>
  <header>
    <title>Test Modal</title>
  </header>
  <body>
    <div id="modal">
      <div class="modal-box">
        <div class="modal-header">Header</div>
        <div class="modal-body">
          <div class="body-content">
            <div class="txt">This is body content</div>
          </div>
        </div>
        <div class="modal-footer">Footer</div>
      </div>
    </div>
  </body>
</html>

Проблема заключается в том, что когда я пытаюсь проверить свиток, когда тело становится выше, тело продолжает расти в зависимости от его содержания.

Я проверял с выше css: 

.modal-body .txt {
   height : 1000px;
}

Мне нужно найти способ сохранить фиксированный рост, в то время как верхний и нижний колонтитулы будут увеличиваться в зависимости от его содержания.

Я пробовал использовать flex css , но результат такой же, как в приведенном выше коде.

...