Html 使用聚合物0.9.2纸盒面板'；卷轴_Html_Css_Polymer

Html 使用聚合物0.9.2纸盒面板'；卷轴

html css polymer

Html 使用聚合物0.9.2纸盒面板'；卷轴,html,css,polymer,Html,Css,Polymer,我正在使用Polymer 0.9.2，使用以下bodytag。但是，纸张标题面板不会滚动，甚至将CSS设置为溢出：滚动，我会得到滚动条，但不会滚动 <body class="fullbleed layout vertical"> <paper-drawer-panel> <paper-header-panel drawer> <paper-toolbar> <div><img src

我正在使用Polymer 0.9.2，使用以下

body

tag。但是，

纸张标题面板

不会滚动，甚至将CSS设置为

溢出：滚动

，我会得到滚动条，但不会滚动

<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>

请不要因为我删掉了一堆不应该影响此问题的额外代码，我知道0.9仍然是测试版。

确保

纸张标题面板

正在填充页面

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

paper-header-panel { 
    height: 100% 
}

如果使用聚合物~0.5：

<body layout vertical>
</body>

如果您使用的是“布局”版本，则必须为您的Polymer版本导入。

需要为

html、正文、纸张标题面板

执行此操作。虽然使用

fullbleed layout vertical

可以使我不需要做那个高度把戏。至少在0.5。我忘了导入聚合物/布局以使其工作。在下面添加了一个更完整的答案。

<body layout vertical>
</body>

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

paper-header-panel { 
    height: 100% 
}

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