Material design lite fix header but scrollable footer

Question

I use Google Material Design Lite to create my site, but I have a problem with it. I wrote this code:

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

So the problem is that the footer is located at the bottom of the page, so the header and footer stuck to the top and bottom of the window, but I would like the footer to be scrollable, so I "Don't want to see if the content larger than the window, but I want the title to stay fixed at the top.How can I solve this?

Answer 1

put <footer></footer>in <main></main>ie

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