title: MaterializeCSS modal header
body: <p>I'm using materializecss framework, right, and I'm trying to make a "modal-header" the same as "modal-footer.</p>
  
  <p>Like, when I use "modal-footer", it creates a block over the modal that stops even scrollbar.</p>
  
  <p>So I copyed some "modal-footer" propreties and paste on a new "modal-header" class on css.</p>
  
  <p>Look:</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="termosdecontrato" class="modal modal-fixed-footer"&gt;
  &lt;div class="modal-header"&gt;&lt;h4 class="centroh"&gt;Termos de contrato&lt;/h4&gt;&lt;/div&gt;
  &lt;div class="modal-content"&gt;
  
  &lt;p style="text-align:justify;text-justify:inter-word;"&gt;Lorem ipsum&lt;/p&gt;
  &lt;/div&gt;
  &lt;div class="modal-footer"&gt;
  &lt;a href="#!" class="modal-action modal-close waves-effect waves-green btn-flat "&gt;Entendi&lt;/a&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.modal {
    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 only screen and (max-width : 992px) {
      .modal {
        width: 80%; } }
    .modal h1, .modal h2, .modal h3, .modal h4 {
      margin-top: 0; }
    .modal .modal-content {
      padding: 24px; }
    .modal .modal-close {
      cursor: pointer; }
    .modal .modal-header {
      border-radius: 0 0 2px 2px;
      background-color: #fafafa;
      padding: 4px 6px;
      height: 56px;
      width: 100%; }
    .modal .modal-footer {
      border-radius: 0 0 2px 2px;
      background-color: #fafafa;
      padding: 4px 6px;
      height: 56px;
      width: 100%; }
      .modal .modal-footer .btn, .modal .modal-footer .btn-large, .modal .modal-footer .btn-flat {
        float: right;
        margin: 6px 0; }
  
  .lean-overlay {
    position: fixed;
    z-index: 999;
    top: -100px;
    left: 0;
    bottom: 0;
    right: 0;
    height: 125%;
    width: 100%;
    background: #000;
    display: none;
    will-change: opacity; }
  
  .modal.modal-fixed-footer {
    padding: 0;
    height: 70%; }
      .modal.modal-fixed-footer .modal-header {
      border-bottom: 1px solid rgba(0, 0, 0, 0.1);
      position: absolute;
      top: 0; }
    .modal.modal-fixed-footer .modal-content {
      position: absolute;
      height: calc(100% - 56px);
      max-height: 100%;
      width: 100%;
      overflow-y: auto; }
    .modal.modal-fixed-footer .modal-footer {
      border-top: 1px solid rgba(0, 0, 0, 0.1);
      position: absolute;
      bottom: 0; }
  </code></pre>
  
  <p>But I have this:
  <a href="http://i.imgur.com/dUZS5m4.png" rel="nofollow">http://i.imgur.com/dUZS5m4.png</a></p>
  
  <p>PS.: My past questions is getting low reputations, why?
  PS².: I <strong>CAN'T</strong> post images yet, ok?</p>