CSS - 滾動到Modal的底部

請參閱下面的代碼 - 以全屏模式運行。爲什麼我不能滾動到數字的底部？CSS - 滾動到Modal的底部

我認爲這是因爲我創建了一個模態的方式，但我看不到如何繞過這個。這個場景對於我正在編寫的應用程序會發生很多，我希望用純CSS來實現這一點。我想避免任何JavaScript hack或降低可滾動列表的高度以使滾動到底（不靈活）。

感謝您的任何意見

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

來源

2016-05-23 Anton Rand

爲什麼模態的位置是固定的？ –

你的問題是.modal類的屬性「overflow：hidden」。可滾動列表超出了屏幕高度，並且被包裹在模態div中，因此隱藏屏幕高度以下的任何內容。如果您的目標是讓可滾動列表佔用描述div下方寡婦的剩餘高度，請在此處查看：http://stackoverflow.com/questions/90178/make-a-div-fill -the-高度的最剩餘屏幕空間 –

變化從「溢出：隱藏」你.modal CSS屬性爲「溢出：滾動」。如果您希望標題保持原樣，請調整模式內容的大小以垂直放置，併爲其指定溢出屬性。

來源

2016-05-23 16:54:38 user2795456

CSS - 滾動到Modal的底部

回答

相關問題