Question

我正在制作一个水平和垂直居中的模态窗口。

问题是当窗口有很多文本时。有些文字（上）没有显示。

感谢。

HTML：

<div id="panel">
  <div>
    1</br>
    2</br>
    3...
  </div>
</div>

A lot of text. </br>
A lot of text. </br>
A lot of text...

CSS：

body {
  margin: 0;
}

#panel {
  background: rgba(0, 0, 0, 0.5);
  color: rgb(255, 255, 255);
  position: fixed;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: auto;
}

正在运行代码：https://jsfiddle.net/dwsr6c71/

Answer 1

您需要将max-height = 100%添加到模态，它会使此模态的高度不大于父级。这是工作小提琴：https://jsfiddle.net/dwsr6c71/1/

和片段：

body {
  margin: 0;
}

#panel {
  background: rgba(0, 0, 0, 0.5);
  color: rgb(255, 255, 255);
  position: fixed;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: auto;
}

#modal {
  max-height: 100%;
}

<div id="panel">
  <div id="modal">
    1</br>
    2</br>
    3</br>
    4</br>
    5</br>
    6</br>
    7</br>
    8</br>
    9</br>
    10</br>
    11</br>
    12</br>
    13</br>
    14</br>
    15</br>
    16</br>
    17</br>
    18</br>
    19</br>
    20</br>
    21</br>
    22</br>
    23</br>
    24</br>
    25</br>
    26</br>
    27</br>
    28</br>
    29</br>
    30</br>
  </div>
</div>

Some text. </br>
Some text. </br>
Some text. </br>
Some text. </br>
Some text. </br>
Some text. </br>
Some text. </br>
Some text. </br>
Some text. </br>
Some text. </br>
Some text. </br>
Some text. </br>
Some text. </br>
Some text. </br>
Some text. </br>
Some text. </br>
Some text. </br>
Some text. </br>
Some text. </br>
Some text. </br>
Some text. </br>
Some text. </br>
Some text. </br>
Some text. </br>
Some text. </br>
Some text. </br>
Some text. </br>
Some text. </br>
Some text. </br>
Some text. </br>
Some text. </br>
Some text. </br>
Some text. </br>
Some text. </br>
Some text. </br>
Some text. </br>
Some text. </br>
Some text. </br>
Some text. </br>
Some text. </br>
Some text. </br>
Some text. </br>

Answer 2

position: fixed;是问题或添加max-height = 100%

的jsfiddle：

https://jsfiddle.net/dwsr6c71/5/

当模态窗口有大量文本时，文本不会显示

2 个答案: