Templates 聚合物布局与模板_Templates_Layout_Polymer

Templates 聚合物布局与模板

templates layout polymer

Templates 聚合物布局与模板,templates,layout,polymer,Templates,Layout,Polymer,我正在学习聚合物（而且玩得很开心）有时候虽然我有工作代码，但当我试图将其提取到元素时，它会停止工作，或者给出意外的结果下面是一个尝试创建“高柱”元素的示例。代码直接放在主体中时有效，但不是从模板中我错过了什么一些进一步的阅读提出了这一点：所以我改变了风格-而且它很有效。。。（为什么在你提出问题后，你能在5分钟内找到答案，我之前真的试过了…）：主持人{ 显示：块；身高：100%； } p_col先生{ 背景颜色：浅蓝色；颜色：白色；身高：100%；宽

我正在学习聚合物（而且玩得很开心）

有时候虽然我有工作代码，但当我试图将其提取到元素时，它会停止工作，或者给出意外的结果

下面是一个尝试创建“高柱”元素的示例。代码直接放在主体中时有效，但不是从模板中

我错过了什么

一些进一步的阅读提出了这一点：

所以我改变了风格-而且它很有效。。。（为什么在你提出问题后，你能在5分钟内找到答案，我之前真的试过了…）


：主持人{
显示：块；
身高：100%；
}        
p_col先生{
背景颜色：浅蓝色；
颜色：白色；
身高：100%；
宽度：60px；
}
身体{
保证金：0；
位置：绝对位置；
宽度：100%；
身高：100%；
框大小：边框框；
}
高柱工程
这也是（固定的一个）。。。
但这不是吗？
p_col先生{
背景颜色：浅蓝色；
颜色：白色；
身高：100%；
宽度：60px；
}
/*这就解决了问题*/
：主持人{
显示：块；
身高：100%；
}        
/*这就解决了问题*/
聚合物（'p-col'，{
就绪：函数（）{
}, 
});

<style>
      :host {
        display: block;
        height: 100%;
      }        
      .p_col {
        background-color: lightblue;
        color: white; 
        height: 100%; 
        width: 60px; 
      }







<!doctype html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
  <meta name="apple-web-app-capable" content="yes">
  <meta name="mobile-web-app-capable" content="yes">
  <script src="/components/platform/platform.js"></script>
  <link rel="import" href="/components/core-item/core-item.html">
  <style>
      body {
        margin: 0;
        position: absolute;
        width: 100%;
        height: 100%;
        box-sizing: border-box;
      }
  </style>
</head>

<body fullbleed unresolved>


<section layout horizontal style="height: 100%">
<section center center-justified style="color: white; height: 100%; width: 60px; background-color: darkblue;">
Tall column - works
</section>
<p-col style="height: 100%">So does this (fixed one) ...</p-col>
<p-col>But this not?</p-col>
</section>

<polymer-element name="p-col"> 
    <template>
    <style>
      .p_col {
        background-color: lightblue;
        color: white; 
        height: 100%; 
        width: 60px; 
      }
      /* THIS SOLVES IT */
      :host {
        display: block;
        height: 100%;
      }        
      /* THIS SOLVES IT */
    </style>
    <section class="p_col" center center-justified>
      <content></content>
    </section>
  </template>
  <script> Polymer('p-col', { 
    ready: function() {
    }, 
    }); 
  </script>
</polymer-element>  

</body>
</html>