title: Modal dialog with fixed header and footer and scrollable content
body: <p>I'm trying to create a modal dialog that has an fixed header and footer and that the content (in this case list of users) inside the modal dialog is scrollable...</p>
  
  <p>My best attempt so far gave me the result on the image:</p>
  
  <p><a href="https://i.stack.imgur.com/cJzqe.jpg" rel="noreferrer"><img src="https://i.stack.imgur.com/cJzqe.jpg" alt="my best"></a></p>
  
  <p>I assume that after seeing the image I dont have to describe what the problem is... and I also assume that you will know what the solution has to look like... :)</p>
  
  <p>But just to be sure I'll write it anyway... The modal dialog needs to have a fixed header (Area where the title "Edit board" "Board name" and "Board type" are located) and footer (Area where the "SAVE" button is located) haveto be fixed/unscrolable... the only thing that has to be scrollable is the list of users...</p>
  
  <p><strong>CODE:</strong></p>
  
  <p><strong>Html:</strong></p>
  
  <pre><code>&lt;div id="addBoardModal" class="modal modal-fixed-footer"&gt;
      &lt;form class="Boards_new" autocomplete="off"&gt;
        &lt;div class="modal-header"&gt;
          &lt;h5&gt;{{title}}&lt;/h5&gt;
          &lt;div class="input-field"&gt;
             &lt;!--INPUT FORM--&gt;
          &lt;div class="BoadType"&gt;
             &lt;!--RADIAL BUTTON THING--&gt; 
        &lt;div class="modal-content"&gt;
              &lt;div class="shareMembers" style="margin-top:18px;"&gt;
                  &lt;div class="row"&gt;
                      &lt;h5 class="left"&gt;Share&lt;/h5&gt;
                        &lt;!--LIST OF USERS !!!THIS HAS TO BE SCROLLABLE!!!--&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
        &lt;div class="modal-footer"&gt;
          &lt;!--JSUT THIS SAVE BUTTON--&gt;
        &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>.modal {
    @extend .z-depth-4;
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    background-color: #fafafa;
    padding: 0;
    max-height: 70%;
    width: 55%;
    margin: auto;
    //overflow-y: auto;
    border-radius: 2px;
    will-change: top, opacity;
  
       @media #{$medium-and-down} {
         width: 80%; }
  
    h1,h2,h3,h4 {
      margin-top: 0; }
  
  .modal-header{
    border-bottom: 1px solid rgba(0, 0, 0, 0.1); 
    width: 100%; 
    height: 15rem; 
    padding:24px;
  }
  
  .modal-header &gt; .input-field{width:100%;}
  
  .modal-content {
    padding: 24px;
    position: absolute; 
    width: 100%; 
    overflow-y: auto; 
    -webkit-overflow-scrolling: touch;
  }
  
  .modal-close {cursor: pointer;}
  
  .modal-footer {
    border-radius: 0 0 2px 2px;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    background-color: #fafafa;
    padding: 4px 6px;
    height: 56px;
    width: 100%;
  
  .btn, .btn-flat {
    float: right;
    margin: 6px 0;
  }
  }
  }
  </code></pre>
  
  <p>So if anyone could please tell me what am I doing wrong in my code or if I should be doing something diferently that would be nice...</p>
  
  <p>I used these examples to code this...<a href="http://codepen.io/stuntbox/pen/lEdpq" rel="noreferrer">Example no.1</a> &amp; <a href="https://gist.github.com/nate-strauser/530e40ee3bb9b5bb35d366b26e5e1331" rel="noreferrer">Example no.2</a></p>
  
  <p><strong>NOTE:</strong> I'm using the Materialize framework</p>