html - CSS - 在模态中滚动到底部

Question

请看下面的代码——在全屏模式下运行。为什么我不能滚动到数字的底部？

我认为这是因为我创建模态的方式，但我看不出如何解决这个问题。这种情况在我正在编写的应用程序中会经常发生，我希望用纯 CSS 来实现。我想避免任何 JavaScript 黑客攻击或降低可滚动列表的高度以使滚动条滚动到底部(不灵活)。

谢谢你的建议

.modal {
  position: fixed;
  left:     0;
  top:      0;
  width:    100%;
  height:   100%;
  overflow: hidden;
}

.modal-header {
  background-color: #FF5722;
  width:            100%;
  height:           52px;
}

.modal-content {
  background-color: white;
  width:            100%;
  height:           100%;
  display:          block;
  position:         relative;
}

.modal-title {
  font-size:    1.40em;
  line-height:  1.40em;
  margin:       0;
  position:     absolute;
  left:         15%;
  line-height:  52px;
  width:        70%;
  text-align:   center;
  color:        white;
}

.description {
  margin-bottom: 20px;  
}

.scrollable-list {
    background: #FFB74D;
    height: 100%;
    overflow: scroll;
    margin: 10px;
    font-size: 20px;
}

<div class="modal">
  <div class="modal-header">
    <header>
      <h1 class="modal-title">Title</h1>
    </header>
  </div>
  <div class="modal-content">
    <div class="description">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vehicula condimentum risus, eget vestibulum diam semper       pretium. Nunc ut vulputate magna. Nullam tincidunt enim neque, at tempor elit aliquam eu. Aliquam est dui, pretium a scelerisque ut, interdum ac nunc.
    </div>
    
        <div class="description">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vehicula condimentum risus, eget vestibulum diam semper       pretium. Nunc ut vulputate magna. Nullam tincidunt enim neque, at tempor elit aliquam eu. Aliquam est dui, pretium a scelerisque ut, interdum ac nunc.
    </div>
    
        <div class="description">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vehicula condimentum risus, eget vestibulum diam semper       pretium. Nunc ut vulputate magna. Nullam tincidunt enim neque, at tempor elit aliquam eu. Aliquam est dui, pretium a scelerisque ut, interdum ac nunc.
    </div>
    
        <div class="description">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vehicula condimentum risus, eget vestibulum diam semper       pretium. Nunc ut vulputate magna. Nullam tincidunt enim neque, at tempor elit aliquam eu. Aliquam est dui, pretium a scelerisque ut, interdum ac nunc.
    </div>
    
    <div class="scrollable-list">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
      <div>7</div>
      <div>8</div>
      <div>9</div>
      <div>10</div>
      
      <div>11</div>
      <div>12</div>
      <div>13</div>
      <div>14</div>
      <div>15</div>
      <div>16</div>
      <div>17</div>
      <div>18</div>
      <div>19</div>
      <div>20</div>
      
      <div>21</div>
      <div>22</div>
      <div>23</div>
      <div>24</div>
      <div>25</div>
      <div>26</div>
      <div>27</div>
      <div>28</div>
      <div>29</div>
      <div>30</div>
        
     
      <div>31</div>
      <div>32</div>
      <div>33</div>
      <div>34</div>
      <div>35</div>
      <div>36</div>
      <div>37</div>
      <div>38</div>
      <div>39</div>
      <div>40</div>
        

    </div>
    
    
  </div>
</div>

Answer 1

将您的 .modal css 属性从“溢出:隐藏”更改为“溢出:滚动”。如果您希望标题保持不变，请调整模态内容的大小以适合垂直方向，并为其赋予溢出属性。