css - 如何将 polymer 组件的高度设置为 100%

Question

我是 polymer 的新手，我正在对它进行一些试验。如何将我的组件设置为全高？这就是我所拥有的，出于某种原因我无法让它工作。它只有他内容的高度:

<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

如果您希望您的 Polymer 元素受您的样式而不是您的 div 的影响，您可以将样式标签中的 div 更改为 :host 以使您的样式影响主机 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>