Boîte de dialogue modale fixe avec en-tête et pied de page et le contenu défilant

Je suis en train de créer une boîte de dialogue modale qui a un fixe en-tête et pied de page et que le contenu (dans ce cas, la liste des utilisateurs) à l'intérieur de la boîte de dialogue modale est de défilement...

Ma meilleure tentative jusqu'à présent m'a donné le résultat sur l'image:

Je suppose qu'après avoir vu l'image je n'ai pas à décrire ce qu'est le problème... et j'ai aussi supposer que vous savez ce que la solution a ressembler à... 🙂

Mais juste pour être sûr que je vais l'écrire quand même... La boîte de dialogue modale doit avoir un en-tête fixe (Zone où le titre "Modifier board" "Conseil d'administration nom" et "type de Carte") et le pied de page (Zone où le bouton "ENREGISTRER" est situé) doit être fixe/unscrolable... la seule chose qui doit être défilement de la liste des utilisateurs...

CODE:

Html:

<div id="addBoardModal" class="modal modal-fixed-footer">
    <form class="Boards_new" autocomplete="off">
      <div class="modal-header">
        <h5>{{title}}</h5>
        <div class="input-field">
           <!--INPUT FORM-->
        <div class="BoadType">
           <!--RADIAL BUTTON THING--> 
      <div class="modal-content">
            <div class="shareMembers" style="margin-top:18px;">
                <div class="row">
                    <h5 class="left">Share</h5>
                      <!--LIST OF USERS !!!THIS HAS TO BE SCROLLABLE!!!-->
                </div>
            </div>
      <div class="modal-footer">
        <!--JSUT THIS SAVE BUTTON-->
      </div>

CSS:

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

Donc si quelqu'un pourrait s'il vous plaît dites-moi ce que j'ai fait une erreur dans mon code ou si je dois faire quelque chose de diferently ce serait sympa...

J'ai utilisé ces exemples de code de ce...Exemple no.1 & Exemple no.2

REMARQUE: je suis en utilisant le Matérialiser cadre

OriginalL'auteur weinde | 2016-12-23