css - polymer 。为什么 适用于 但不适用于

Question

UPD:已解决

我有默认的 Polymer Starter Kit(高级)布局，结构如下所示

<template>
    <paper-drawer-panel id="paperDrawerPanel" force-narrow>
            <paper-header-panel drawer fixed>
                <paper-toolbar id="drawerToolbar">                    
                </paper-toolbar>

            <!-- Drawer Content --> 

             </paper-header-panel>

        <paper-scroll-header-panel main id="headerPanelMain" condenses keep-condensed-header>
             <paper-toolbar id="mainToolbar" class="tall">
                <paper-icon-button id="paperToggle" icon="menu" paper-drawer-toggle></paper-icon-button>
              <!-- Toolbar icons -->

                <div class="middle middle-container">
                <div class="app-name">appname</div>
              </div>
            </paper-toolbar>                       

            <div class="content">
             <iron-pages attr-for-selected="data-route" selected="{{route}}">

                <section>
                </section>

                <section>
                </section>

             </iron-pages>
           </div>   
         </paper-scroll-header-panel>
     </paper-drawer-panel>
</template>

但是当我尝试使用 paper-header-panel 而不是 paper-scroll-header-panel 时，所有 iron-pages结构消失。我知道这是由于 paper-scroll-header-panel 和 paper-header-panel

之间的 CSS 差异造成的

附言我已经安装并导入了 paper-header-panel

问题是我不希望我的工具栏变高然后在滚动时逐渐压缩(这就是为什么我尝试用 paper-header-panel 替换它的原因)，我希望它始终被压缩(如 seamed 模式当您使用 paper-header-panel 但在这种情况下 iron-pages 将不起作用时，这就是问题所在)。

问题是

• 如何使 paper-scroll-header-panel 始终紧凑，而不仅仅是在您向下滚动时
• 或者，如果这不可能，我该如何将其替换为 paper-header-panel 并使其与 <iron-pages> 一起使用？

Answer 1

找出解决方案。

对于那些会遇到同样问题的人

将 condenses keep-condensed-header 替换为 fixed

然后从工具栏中删除 class="tall"

那样

  <paper-scroll-header-panel main id="headerPanelMain" fixed>
        <paper-toolbar id="mainToolbar">
         ...

它不会凝结 + 你会工作 <iron-pages>路线