當模態窗口有很多文字時，文本不會顯示

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

position: fixed;的問題或添加max-height = 100%

的jsfiddle：

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

Answer 2

您需要添加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>