ポリマーアプリ-引き出しが閉じ＆コンテンツ私はユーチューブウェブ（www.youtube.com）のようなレイアウトを持つアプリケーションを構築しようとしていたすべてのスペース

Question

を取らない時にラッパーをぶら下げ左、ここに私のコードは次のとおりです。

 <app-drawer-layout> 

     <app-drawer id="menuDrawer" slot="drawer"> 
      <div class="drawer-contents"> 
      <paper-icon-item> 
       <iron-icon icon="inbox" item-icon slot="item-icon"></iron-icon> 
       <span>inbox</span> 
      </paper-icon-item> 
      <paper-icon-item> 
       <iron-icon icon="favorite" item-icon slot="item-icon"></iron-icon> 
       <span>favorite</span> 
      </paper-icon-item> 
      <paper-icon-item> 
       <iron-icon icon="polymer" item-icon slot="item-icon"></iron-icon> 
       <span>polymer</span> 
      </paper-icon-item> 
      <paper-icon-item> 
       <iron-icon icon="question-answer" item-icon slot="item-icon"></iron-icon> 
       <span>question-answer</span> 
      </paper-icon-item> 
      <paper-icon-item> 
       <iron-icon icon="send" item-icon slot="item-icon"></iron-icon> 
       <span>send</span> 
      </paper-icon-item> 
      <paper-icon-item> 
       <iron-icon icon="archive" item-icon slot="item-icon"></iron-icon> 
       <span>archive</span> 
      </paper-icon-item> 
      <paper-icon-item> 
       <iron-icon icon="backup" item-icon slot="item-icon"></iron-icon> 
       <span>backup</span> 
      </paper-icon-item> 
      <paper-icon-item> 
       <iron-icon icon="dashboard" item-icon slot="item-icon"></iron-icon> 
       <span>dashboard</span> 
      </paper-icon-item> 
      </div> 
     </app-drawer> 

     <app-toolbar> 
      <paper-icon-button id="menuButton" icon="menu" on-tap="_onToggle"></paper-icon-button> 
     </app-toolbar> 

     <div id="navigationMap" style="width: 100%; height: 500px;"></div> 

     </app-drawer-layout> 

より完全なコードはjsbin：https://jsbin.com/sizeruducu/edit?html,outputにありました。それはラッパーだと、これは右側にぶら下がって適切なコンテンツを左トグルボタンをクリックするたびに、左側のアプリの引き出しが消えていた

1. ではなく、私はいくつかの問題に直面しています。 youtube webとは異なり、左上のメニューボタンをクリックしようとするたびに、メニュードロワーが非表示になり、残りのすべての領域に適切なコンテンツが埋め込まれます。
2. 私のGoogleマップは、100％の高さに変更しようとしても、すべてのスペースに適合しません。ちょうど適合しません。私はそれがすべてのスペース（幅と高さ）を占めるようにしたい。

ご意見、ご回答ありがとうございます。

Answer 1

Follwoingの変更が必要とされていますdrawerを非表示にするには、

• トグル機能：

  _onToggle() { 
      //this.$.menuDrawer.toggle(); 
      var drawerLayout = this.$.drawerLayout; 
      if (drawerLayout.forceNarrow || !drawerLayout.narrow) { 
       drawerLayout.forceNarrow = !drawerLayout.forceNarrow; 
  
      } else { 
       drawerLayout.drawer.toggle(); 
      } 
  } 
  

  代わりのapp-drawerをトグルし、あなたはapp-drawer-layoutのレイアウトを変更する必要があります。

• app-drawer-layout：

  <app-drawer-layout force-narrow id="drawerLayout" fullbleed >

  fullbleed属性は、そのコンテナのサイズに合わせて行います。 force-narrow属性を狭いレイアウトにしたい場合は、 にすることができます。

• は、ナビゲーションの高さを変更するには：

  Demo

this.$.navigationMap.style.height = window.innerHeight+'px'; 

あなたは youtubeようにそれを作りたい場合。 Click here。

responsiveWidth属性のデフォルト値は640pxなので、widthの出力をjsbinに増やす必要があります。