如何將聚合物組分的高度設置爲100％

Question

我是聚合物的新成員，我正在嘗試一點。我怎樣才能將我的組件設置爲全高？ 這就是我所擁有的，由於某些原因，我無法使其工作。它只有他的內容的高度：

<link rel="import" href="/bower_components/polymer/polymer.html"> 

<dom-module id="reactive-navbar"> 
    <style> 
    div { 
     display: block; 
     width: 20%; 
     height: 100%; 
     background-color: #2c3e50; 
    } 
    </style> 
    <template> 
     <div> 
      <content></content> 
     </div> 
    </template> 
</dom-module> 

<script> 
Polymer({ 
    is: "reactive-navbar", 
}); 
</script> 

Answer 1

如果你想通過你的風格，而不是你的div影響您的聚合物元件，可以改變該分區在你的風格標籤：主機，使您的風格影響主機https://www.polymer-project.org/1.0/docs/devguide/styling.html

更新代碼：

<link rel="import" href="/bower_components/polymer/polymer.html"> 

<dom-module id="reactive-navbar"> 
    <style> 
    :host { 
     display: block; 
     width: 20%; 
     height: 100%; 
     background-color: #2c3e50; 
    } 
    </style> 
    <template> 
     <content></content> 
    </template> 
</dom-module> 

<script> 
Polymer({ 
    is: "reactive-navbar", 
}); 
</script> 

Answer 2

在您的index.html文件，HTML標籤設置樣式：

html { 
    height: 100%; 
}