Polymer 怎么能<；核心页面>；从所选子对象获取其高度？

我使用的是Polymer web组件，我发现

核心页面

元素的默认高度是0。我希望它取决于其子元素的高度，理想情况下是所选子元素的高度

下面是一个示例页面，演示了问题（）：

在核心页面元素之前
Lorem ipsum dolor sit amet，献祭精英，
劳工和大型企业的临时投资
阿利夸。我们需要一个最低限度的练习
ullamco laboris nisi和aliquip ex ea commodo consequat。酒后驾车
在卷曲的纤毛上有一种强烈的怨恨
多洛雷欧盟福吉亚无巴黎。圣奥凯卡除外
丘比特人不轻率，必须承担责任
莫利特动物是产下的。
核心页面元素之后
//取消注释此混乱以修复布局。
/*window.addEventListener（'polymer-ready'，function（）{
var selected=document.querySelector（'core-selected'）；
var height=window.getComputedStyle（已选）.height；
document.querySelector（'core-pages'）.setAttribute（'style'，'height:'+height）；
}); */

在我的桌面Chrome 39上，尾部标题与

核心页面

内容重叠（而不是出现在其下方），因为

核心页面

元素的高度为0（我认为这是因为

核心页面

实现在子元素上使用绝对定位，但我可能错了）

这可以通过给

核心页面

元素一个明确的高度来“修复”（例如示例中的注释javascript），但这是不可取的，应该在回流时触发。它很难看，与Polymer的声明强调不一致

是否有任何优雅的方式将

核心页面

与其内容相匹配，以便以直观的方式进行布局？我希望有一些神奇的CSS或聚合物设置可以解决这个问题。

在

演示页面（）中，他们也使用了明确的高度来解决这个问题，所以我想这是目前的“官方”方式

---

稍后我将尝试一些CSS技巧，看看是否可以找到更优雅的解决方案

我采取了以下解决方法

比如说，我们有一个

核心页面

嵌套我的自定义组件

mudasobwa custom

：

<core-pages selected="0" block>
  <mudasobwa-custom>CONTENT</mudasobwa-custom>  
</code-pages>

然后我们需要在

核心页面

子组件上定义一个

computed

属性（无论

核心页面

是否嵌套纯HTML元素，都可以用“包装器”组件包围内容，这不是我的情况；我嵌套了

mudasobwa自定义

组件。）

这种方法可能看起来过于工程化，但它要求只编写一次表达式，然后立即生成对所有实际宽度/高度的访问

现场：

---

希望它能帮助某人。

如果不需要孩子的绝对定位，你可以在核心页面中定位他们的相对定位：

在您的示例中：

core-pages > div {
    position: relative !important;
}

---

你有没有找到解决这个问题的方法？没有，没有任何非笨拙的方法，不包括尝试捕获所有可能影响布局的事件，并执行javascript来更正大小。不幸的是，核心页面的重点是选择并显示一个子页面。通过相对定位，核心页面控制子页面的可见性，但在未选中子页面所在的空白区域。

PolymerExpressions.prototype.elementSize = function(el) {
  var result = { w: 0, h: 0 };
  for (ch in el) {
    result.w += el[ch].offsetWidth;
    result.h += el[ch].offsetHeight;
  }
  return result;
};

<!--                         don’t forget to publish ⇓⇓⇓⇓⇓ -->
<polymer-element name="mudasobwa-custom" attributes="sizes ......
.......
Polymer({
.......
  needupdate: boolean,
  computed: {
    sizes: 'elementSize($, needupdate)'
  }
.......

<!--        use auto binding     ⇓⇓⇓⇓⇓⇓⇓ -->           
<core-pages ... style="height:{{ sizes.h }}px;">
  <mudasobwa-custom sizes="{{ sizes }}">

core-pages > div {
    position: relative !important;
}