材料设计轻量级修复标题栏但滚动页脚

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>

因为页脚被定位在页面底部，所以页头和页脚都与窗口的顶部和底部粘着。但是，我希望页脚可以滚动，如果内容高于窗口，则不想看到它，但是我希望页头保持固定在顶部。怎么解决这个问题？

- zoli777

Answer 1

将 <footer></footer> 放入 <main></main> 中，即： <main> <footer class="mdl-mega-footer"> ... </footer> </main>

- musale

---

将其放在主体内会导致某些内容溢出，并且在页脚下方有一些空白！ - mythicalcoder