如何将聚合物组件的高度设置为 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%的主要内容,如果未能解决你的问题,请参考以下文章