如何将聚合物组件的高度设置为 100%答案

【问题标题】：How to set the height of a polymer component to 100%如何将聚合物组件的高度设置为 100%
【发布时间】：2015-08-24 23:23:49
【问题描述】：

我是聚合物的新手，我正在用它做一些实验。如何将我的组件设置为全高？这就是我所拥有的，由于某种原因我无法让它工作。它只有他的内容的高度：

<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>

【问题讨论】：

您是在尝试将样式应用于 div 还是您的聚合物元素？如果是聚合物元素，您可以在样式表中更改该 div 为 :host polymer-project.org/1.0/docs/devguide/styling.html
我将 div 更改为 :host 并将我的主 css 文件中的 body 标记更改为高度等于 100vh，看起来它工作得很好。谢谢

标签： css components polymer

【解决方案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>

【讨论】：

【解决方案2】：

在你的 index.html 文件中，为 html 标签设置样式：

html {
  height: 100%;
}

【讨论】：