Question

请参阅以下代码 - 以全屏模式运行。为什么我不能滚动到数字的底部？

我认为这是因为我创造了一个模态的方式，但我看不出如何绕过这个。这个场景将在我正在编写的应用程序中发生很多，并且我希望用纯CSS实现这一点。我想避免任何JavaScript黑客攻击或降低可滚动列表的高度以使滚动到达底部（不灵活）。

感谢您的任何建议

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

Answer 1

从＆＃34;溢出：隐藏＆＃34;更改.modal css属性to＆＃34;溢出：滚动＆＃34;。如果你想让标题保持不变，那么调整模态内容的大小以使其垂直，并赋予它溢出属性。

CSS - 在Modal中滚动到底部

1 个答案: