用紙引き出しパネルにより、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> 

GOOD - 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はヘッダーの高さです。