用鐵頁元素填充頁

我想用鐵頁元素填充整個頁面。用下面的代碼，我想創建一個網頁，如下所示：用鐵頁元素填充頁

------------------------------------- 
| Top         | 
------------------------------------- 
| Bottom        | 
|          | 
|          |  
|          | 
|          | 
|          |  
-------------------------------------

代碼：

<html> 
<head> 
    <script src="bower_components/webcomponentsjs/webcomponents.js"></script> 

    <link rel="import" href="bower_components/polymer/polymer.html"> 
    <link rel="import" href="bower_components/iron-flex-layout/iron-flex-layout.html"> 
    <link rel="import" href="bower_components/iron-pages/iron-pages.html"> 

    <style is="custom-style"> 
     html,body { 
      margin: 0; 
      padding: 0; 
      height: 100%; 
      background-color: yellow; 
     } 
     div { 
      border: 2px solid grey; 
      background-color: white; 
      margin: 2px; 
     } 
     p { 
      margin: 5px; 
     } 
     .outer { 
      width: 100%; 
      height: 100%; 
      @apply(--layout-vertical); 
      @apply(--layout-flex); 
     } 
     .inner { 
      @apply(--layout-flex); 
     } 
    </style> 
</head> 
<body> 
    <div class="outer"> 
     <div><p>Top</p></div> 
     <iron-pages selected="0" class="inner"> 
      <div><p>Bottom</p></div> 
     </iron-pages> 
    </div> 
</body> 
</html>

然而，底部並沒有擴張以填充可用空間。

如果我刪除iron-pages元素並將內部樣式添加到底部div，我會得到所需的結果。

來源

2015-11-08 MrK

解決了這個問題。 Iron-pages元素需要彎曲以獲取可用空間（因爲它是），然後內容也需要彎曲以填滿整個區域。

<html> 
<head> 
    <script src="bower_components/webcomponentsjs/webcomponents.js"></script> 

    <link rel="import" href="bower_components/polymer/polymer.html"> 
    <link rel="import" href="bower_components/iron-flex-layout/iron-flex-layout.html"> 
    <link rel="import" href="bower_components/iron-pages/iron-pages.html"> 

    <style is="custom-style"> 
     html,body { 
      margin: 0; 
      padding: 0; 
      height: 100%; 
      background-color: yellow; 
     } 
     div { 
      border: 2px solid grey; 
      background-color: white; 
      margin: 2px; 
     } 
     p { 
      margin: 5px; 
     } 
     .outer { 
      width: 100%; 
      height: 100%; 
      @apply(--layout-vertical); 
      @apply(--layout-flex); 
     } 
     .inner { 
      @apply(--layout-flex); 
      @apply(--layout-vertical); 
     } 
     .content { 
      @apply(--layout-flex); 
     } 
    </style> 
</head> 
<body> 
    <div class="outer"> 
     <div><p>Top</p></div> 
     <iron-pages selected="0" class="inner"> 
      <div class="content"> 
       <p>Bottom</p> 
      </div> 
     </iron-pages> 
    </div> 
</body> 
</html>

來源

2015-11-08 21:39:40 MrK

用鐵頁元素填充頁

回答

相關問題