Polymer 设置核心页面元素的高度？_Polymer

Polymer 设置核心页面元素的高度？

polymer

Polymer 设置核心页面元素的高度？,polymer,Polymer,我很难让core pages元素在我的自定义元素中具有非零高度。核心页面高度与其所选内容相同的最佳实践是什么。这里有一个简单的例子，它明显地破坏了： <!DOCTYPE html> <html> <head> <meta charset=utf-8 /> <title>Polymer</title> </head> <body> <script src="ht

我很难让core pages元素在我的自定义元素中具有非零高度。核心页面高度与其所选内容相同的最佳实践是什么。这里有一个简单的例子，它明显地破坏了：

<!DOCTYPE html>
<html>
  <head>
    <meta charset=utf-8 />
    <title>Polymer</title>
  </head>
  <body>
    <script src="http://www.polymer-project.org/platform.js"></script>
    <link rel="import" href="http://www.polymer-project.org/components/polymer/polymer.html">
        <link rel="import" href="http://www.polymer-project.org/components/core-pages/core-pages.html">


    <polymer-element name="x-foo">
      <template>
        <core-pages id="pages" selected="{{selected}}">
          <content></content>
        </core-pages>
      </template>
      <script>
        Polymer('x-foo', {
          ready: function() {
            this.selected = 0;
          }
        });
      </script>
    </polymer-element>

    <polymer-element name="x-bar">
      <template>
          <div><content></content></div>
      </template>
      <script>
        Polymer('x-bar', {});
      </script>
    </polymer-element>


    <p>BEFORE</p>
    <x-foo>
      <x-bar>some text here</x-bar>
      <x-bar>some other text here</x-bar>
    </x-foo>
    <p>AFTER</p>
  </body>
</html>


聚合物
聚合物（“x-foo”{
就绪：函数（）{
此参数为0；
}
});
聚合物（'x-bar'，{}）；
以前
这里有一些文字
这里还有其他一些文字
之后

和jsbin来查看结果：（注意核心页面内容与下一个元素的重叠）

此示例显示自定义元素中的核心页面元素。注入核心页面的内容也是自定义元素

这里的最佳实践是什么？

您可以将样式应用于x-foo元素中当前选定的页面，该元素设置display:block和position:relative，这样x-bar将继承其内容的高度

我还向x-foo元素添加了“block”属性，因此它也继承了所选页面的高度。其他常规属性在此处->


：：内容>。已选择核心{
位置：相对位置；
显示：块；
}
聚合物（“x-foo”{
就绪：函数（）{
此参数为0；
}
});
聚合物（'x-bar'，{}）；
以前
这里有一些文字
这里还有其他一些文字
在

成功之后——成功了。