CSS - Scroll to bottom in Modal

Question

Please see below code - run in fullscreen mode. Why can't I scroll to the bottom of the numbers?

I think it's because of the way I have created a modal but I cannot see how to get round this. This scenario will happen quite a lot with the application I am writing and I'm hoping to achieve this with pure CSS. I want to avoid any JavaScript hacks or lowering the height of the scrollable list to get the scroll going to the bottom (not flexible).

Thank you for any advice

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

Your problem is the .modal class having the property "overflow: hidden". The scroll-able list extends beyond the screen height, and is wrapped in the modal div, so anything below the screen height is hidden. If your goal is to have the scroll-able list take up the remaining height of the widow below the description divs, take a look here: http://stackoverflow.com/questions/90178/make-a-div-fill-the-height-of-the-remaining-screen-space — Lucas Watson, May 23 '16 at 16:52

score 1 · Accepted Answer · answered May 23 '16 at 16:54

1

Change your .modal css property from "overflow: hidden" to "overflow: scroll". If you are wanting the header to stay put, then resize the modal content to fit vertically, and give it the overflow property.

answered May 23 '16 at 16:54

jwmoreland

141
6

CSS - Scroll to bottom in Modal

1 Answers1