【问题标题】:Material design lite fix header but scrolling footer材料设计精简版修复页眉但滚动页脚
【发布时间】:2016-05-22 21:38:56
【问题描述】:

我正在使用 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>

所以,问题在于,页脚位于页面底部,因此页眉和页脚都粘在窗口的顶部和底部,但我希望页脚可滚动,所以我不如果内容高于窗口,我不想看到它,但我希望标题保持固定在顶部。我该如何解决这个问题?

【问题讨论】:

    标签: css material-design-lite


    【解决方案1】:

    &lt;footer&gt;&lt;/footer&gt; 放入&lt;main&gt;&lt;/main&gt;

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

    【讨论】:

    • 把它放在 main 里面会导致一些内容溢出,并且在页脚下面的底部有一个空白!!
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2016-10-18
    • 2017-05-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多