用铁页元素填充页

我想用铁页元素填充整个页面。用下面的代码，我想创建一个网页，如下所示：用铁页元素填充页

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

用铁页元素填充页

回答

相关问题