纸质抽屉面板导致Y滚动条不滚动到视口底部

Question

当我使用paper-drawer-panel时，视口不正确。如第一个屏幕截图所示，Y滚动条应该在那里....但是视口的底部不等于y滚动条的结尾/底部。在其他方面，仍有一部分内容未显示为隐藏。

如果我删除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是标题的高度。