paper-drawer-panel 导致 Y 滚动条不滚动到视口底部

Question

当我使用paper-drawer-panel时，视口不正确。如第一个屏幕截图所示，Y 滚动条应该在那里……但视口底部不等于 y 滚动条的 end/bottom。另外，还有一部分内容是隐藏的，没有显示出来。

如果我删除 paper-drawer-panel，那么一切都很好并且 Y 滚动条滚动到视口底部。

这是在 index.html.

不好 - paper-drawer-panel:

  <template is="dom-bind" id="app">
    <paper-drawer-panel force-narrow="true">
      <div drawer>
        <drawer-custom></drawer-custom>
      </div>
      <div main>
        <div id="header-v-center">
          <paper-icon-button id="paper-toggle" icon="menu" paper-drawer-toggle>
          </paper-icon-button>
          <div id="header-text-middle">SPICES OF THE WORLD</div>
          <div id="header-text-right">A SPECIAL EDITION! </div>
        </div>
        <div id="video-player-header" onclick="page('/home')" style="display: none">
          <div>
            <iron-icon icon="icons:arrow-back"></iron-icon>
          </div>
        </div>
        <video-selection></video-selection>
        <video-player></video-player>
      </div>
    </paper-drawer-panel>
  </template>

良好 - 没有 paper-drawer-panel：

  <template is="dom-bind" id="app">
      <div main>
        <div id="header-v-center">
          <paper-icon-button id="paper-toggle" icon="menu" paper-drawer-toggle>
          </paper-icon-button>
          <div id="header-text-middle">SPICES OF THE WORLD</div>
          <div id="header-text-right">A SPECIAL EDITION! </div>
        </div>
        <div id="video-player-header" onclick="page('/home')" style="display: none">
          <div>
            <iron-icon icon="icons:arrow-back"></iron-icon>
          </div>
        </div>
        <video-selection></video-selection>
        <video-player></video-player>
      </div>
  </template>

Answer 1

没有看到实时页面，很可能你的身高是：100%；对于您的内容区域，当它应该是高度时：calc(100% - Xpx)；其中 X 是页眉的高度。

paper-drawer-panel 导致 Y 滚动条不滚动到视口底部

paper-drawer-panel causes Y scrollbar not to scroll to the bottom of viewport

polymer

polymer-1.0