Question

我正在使用核心抽屉面板创建一个应用程序。核心抽屉面板允许您创建抽屉和主标题。如果我在</core-drawer-panel>之后放置任何文字，它不会显示在应用中，所以我假设所有内容都需要进入<div class="content">才能看到它。

如果我想像topeka的状态栏那样创建一个静态页脚，我该如何去做呢？是否可以使用core-drawer-panel？

Answer 1

页脚需要位于您使用core-drawer-panel的main属性指定的元素内。

footer {
  position: fixed;
  background: white;
  width: 100%;
  bottom: 0;
}

<core-drawer-panel>
  <core-header-panel drawer>
    ...
  </core-header-panel>
  <core-header-panel main>
    <core-toolbar>asdf</core-toolbar>
    <div fit>
      <footer>Sticky Footer!</footer>
    </div>
  </core-header-panel>
</core-drawer-panel>

演示：http://jsbin.com/dofiqiliyuxo/1/edit

Answer 2

Layout features：

<style>
.content {
    overflow-y: scroll;
}
footer {
    background: rgba(255, 0, 0, 0.2);
    height: 50px;
    padding: 10px 15px;
}
</style>

<core-drawer-panel>
    <core-header-panel drawer>
        <core-toolbar>...</core-toolbar>
        <div> Drawer content... </div>
    </core-header-panel>
    <core-header-panel main>
        <core-toolbar>Toolbar title</core-toolbar>
        <div fit vertical layout>
            <header>Top text</header>
            <div flex class="content">
                ...
            </div>
            <footer>Footer!</footer>
        </div>
    </core-header-panel>
</core-drawer-panel>

演示：http://jsbin.com/dabikurori/1/

是否可以在核心抽屉面板上添加静态页脚？

2 个答案: