Material design lite 修复 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>

所以，问题是，页脚位于页面底部，所以 header 和页脚都粘在 window 的顶部和底部，但我会喜欢页脚可以滚动，所以如果内容高于 window，我不想看到它，但我希望 header 固定在顶部。我该如何解决？

Answer 1

将 <footer></footer> 放在 <main></main> 中，即

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

Material design lite 修复 header 但滚动页脚

Material design lite fix header but scrolling footer

css

material-design-lite