<core-pages>如何才能從選定的孩子中獲得高度？

我正在使用Polymer Web組件，並且我發現core-pages元素的默認高度爲0.我希望它取決於其子元素的高度，理想情況下是所選子元素的高度。<core-pages>如何才能從選定的孩子中獲得高度？

以下是一個演示問題（live jsbin）的示例頁面：

<!DOCTYPE html> 
<html> 
    <head> 
    <script src="https://www.polymer-project.org/components/webcomponentsjs/webcomponents.js"></script> 
    <link rel="import" href="https://www.polymer-project.org/components/core-pages/core-pages.html"> 
    </head> 
    <body> 
    <h1>Before &lt;core-pages&gt; element</h1> 
    <core-pages selected="0" block> 
     <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, 
     sed do eiusmod tempor incididunt ut labore et dolore magna 
     aliqua. Ut enim ad minim veniam, quis nostrud exercitation 
     ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis 
     aute irure dolor in reprehenderit in voluptate velit esse cillum 
     dolore eu fugiat nulla pariatur. Excepteur sint occaecat 
     cupidatat non proident, sunt in culpa qui officia deserunt 
     mollit anim id est laborum.</div> 
    </core-pages> 
    <h1>After &lt;core-pages&gt; element</h1> 

    <script> 
    // Uncomment this kludge to fix the layout. 
    /* window.addEventListener('polymer-ready', function() { 
    var selected = document.querySelector('core-selected'); 
    var height = window.getComputedStyle(selected).height; 
    document.querySelector('core-pages').setAttribute('style', 'height:' + height); 
    }); */ 
    </script> 
    </body> 
</html>

在我的桌面版Chrome 39，後頭部重疊core-pages內容（而不是出現在它下面），因爲core-pages元素被賦予了0的高度（我相信這是因爲core-pages實現對子元素使用絕對定位，但我可能是錯的）。

這可以通過給core-pages元素指定一個明確的高度（例如在示例中使用註釋的javascript）來「固定」，但這是不受歡迎的，真的應該在迴流時觸發。這是醜陋的，並不符合聚合物的聲明強調。

是否有任何優雅的方式適合core-pages到它的內容，因此它以直觀的方式奠定了？我希望有一些神奇的CSS或Polymer設置可以解決這個問題。

來源

2014-12-20 rhashimoto

你有沒有找到解決方案 – aloo

不，沒有任何非克魯格方式，不涉及試圖捕捉所有可能影響佈局的事件並執行JavaScript來糾正大小。 – rhashimoto

在<core-pages>演示頁（https://www.polymer-project.org/components/core-pages/demo.html）他們也用明確的高度來解決這個問題，所以我想這是現在的「官方」的方式...

我會嘗試一些CSS技巧後者看看我能否找到更優雅的解決方案...

來源

2014-12-21 16:34:19 LostInBrittany

我來到以下解決方法。

說，我們有一個core-pages築巢我的自定義組件mudasobwa-custom：

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

讓我們定義一個PolymerExpression，如：

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; 
};

然後，我們需要定義在core-pages後裔組件computed財產（人們可能會用「包裝器」組件包圍內容，不管是core-pages是否嵌套純HTML元素，這不是我的cas Ë;我有mudasobwa-custom部件嵌套）

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

一旦needupdate改變它的值，表達爲要重新計算（將其用於顯式觸發）唯一認爲剩下的就是core-pages寬度/高度綁定到此。計算出的屬性：

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

這種方法可能看起來過度設計的，但它需要只能寫入一次的表達，然後你立刻得到所有真正的寬度/高度的訪問。

直播：http://plnkr.co/edit/U98IzTxUVUuEUuPbxNgF?p=preview

希望它可以幫助別人。

來源

2015-01-17 08:04:39 mudasobwa

如果不需要絕對定位的孩子，可以在覈心內頁相對放置它們：

在您的例子：

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

http://codepen.io/anon/pen/vEZjWd

來源

2015-01-25 17:35:57

不幸的是，核心頁面的要點是選擇並顯示一個孩子。通過相對定位，核心頁面控制兒童的可見度，但空白區域是未選擇的兒童。 – rhashimoto

<core-pages>如何才能從選定的孩子中獲得高度？

回答

相關問題