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

Posted

技术标签:

【中文标题】如何将聚合物组件的高度设置为 100%【英文标题】:How to set the height of a polymer component to 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,看起来它工作得很好。谢谢 【参考方案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%;

【讨论】:

以上是关于如何将聚合物组件的高度设置为 100%的主要内容,如果未能解决你的问题,请参考以下文章

如何将两个浮动 div 设置为页面的 100% 高度

如何将 iframe 高度和宽度设置为 100%

如何将最小高度设置为查看屏幕的 100% 和页面的一半?

如何使用粘性页脚将引导 3 容器设置为浏览器高度的 100%?

如何css宽度设置为包含内容,高度设置为100%?

高度为 100% 的 Vue 组件在 v-if 重新渲染时改变高度