Материальный дизайн lite fix header, но прокручиваемый нижний колонтитул

Question

Я использую Google Material Design Lite для создания своего сайта, но у меня есть проблема с ним. Я написал этот код:

<div class="mdl-layout mdl-js-layout mdl-layout--no-desktop-drawer-button"> 
    <header class="mdl-layout__header"> 

     <img class="mdl-layout-icon"></img> 

     <div class="mdl-layout__header-row"> 
      ... 
     </div> 

    </header> 
    <div class="mdl-layout__drawer"> 
     ... 
    </div> 
    <main class="mdl-layout__content"> 
     ... 
    </main> 
    <footer class="mdl-mega-footer> 
     ... 
    </footer> 
</div> 

Итак, проблема в том, что сноска расположен в нижней части страницы, так как заголовок и нижний колонтитул прилипает к верхней и нижней части окна, но я хотел бы нижний колонтитул должен быть прокручиваемым, поэтому я не хочу видеть его, если содержимое выше окна, но я хочу, чтобы заголовок оставался фиксированным в верхней части. Как я могу это решить?

Answer 1

поставил <footer></footer> в <main></main> т.е.

<main> <footer class="mdl-mega-footer"> ... </footer> </main>