Question

我正在尝试用铁页元素填充整个页面。使用以下代码，我尝试创建一个如下所示的页面：

 -------------------------------------
| 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，我会得到所需的结果。

Answer 1

解决了这个问题。铁页元素需要弯曲以占用可用空间（原样），然后内容也需要弯曲以填充整个区域。

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

用铁页元素填充页面

1 个答案: