使用 Polymer 0.9.2 纸抽屉面板不滚动

Question

我正在使用 Polymer 0.9.2，使用以下 body 标签。但是，paper-header-panel 不会滚动，甚至将 CSS 设置为 overflow:scroll，我得到滚动条但没有滚动。

<body class="fullbleed layout vertical">
<paper-drawer-panel>
    <paper-header-panel drawer>
        <paper-toolbar>
            <div><img src="my-image.png"></div>
        </paper-toolbar>
        <paper-menu id="mainMenu">
            <paper-item>One</paper-item>
            <paper-item>Two</paper-item>
        </paper-menu>
    </paper-header-panel>
    <paper-header-panel main>
        <paper-toolbar>
            <paper-icon-button icon="menu" paper-drawer-toggle></paper-icon-button>
            <div>My Title</div>
            <img src="my-avatar.png" aria-label="avatar" title="avatar" width="64px" height="64px"/>
            <a href="/logout" aria-label="Logout" title="Logout">Logout</a>
        </paper-toolbar>
        <div id="content">My content/div>
    </paper-header-panel>
</paper-drawer-panel>
</body>

我正在使用的css

body {
    font-family: 'Roboto',Arial,sans-serif;
    color: #4B8A4B;
    background-color: #001900;
}

[main] paper-toolbar {
    background-color: #004C00;
    color: #001900;
}

[drawer] a {
    width: 100%;
}

[drawer] paper-toolbar {
    height: 265px;
}

[drawer] paper-toolbar div {
    overflow: hidden;
    position: relative;
}

#content {
    padding-left: 15px;
    padding-right: 15px;
}

[drawer] {
    border-right: thin #000 inset;
    -moz-border-right-colors: #000;
    background: #001900;
}

请注意，我删除了一堆不应该影响这个问题的额外代码，而且我知道 0.9 仍然是测试版。

Answer 1

确保 paper-header-panel 填满了页面。

这应该足以使您的内容可滚动：

paper-header-panel { 
    height: 100% 
}

Answer 2

如果您使用聚合物 ~0.5:

<body layout vertical>
</body>

如果您使用的是 >0.8：

<body class="layout vertical">
</body>

或 CSS（适用于我所知道的任何版本）：

paper-header-panel { 
    height: 100% 
}

body, html {
    height: 100%
    margin: 0
}

如果您使用的是 "layout" 版本，则必须为您的 Polymer 版本导入 Polymer/layout (0.5 docs)。

使用 Polymer 0.9.2 纸抽屉面板不滚动

Using Polymer 0.9.2 paper-drawer-panel doesn't scroll

html

css

polymer