Question

我正在尝试使用全屏纸质标题面板..

浏览器：Firefox v35
操作系统：Linux
聚合物：v1.4

内容区域位于标题区域后面。注意身体标签周围的红色边框：

如果我明确设置body height:100vh，身体标签会伸展，但绿色区域不会“弯曲”

我在这里缺少什么？

同样在Chrome v49 64bit上，页面呈现如下：

HTML：

    <style>
        .icon-snooze {
            color: red;
            width: 48px;
            height: 48px;
        }
    </style>
    <link rel="import" href="bower_components/iron-flex-layout/iron-flex-layout-classes.html" />

    <style is="custom-style" include='iron-flex'>
        body {
            border: 2px solid red;
        }
        paper-header-panel {
            height: 100%;
        }
        .content {
            border: 2px solid dodgerblue;
        }
        .moContent {
            background-color: var(--paper-light-green-500);
        }

        .blue .paper-header {
            background-color: var(--paper-light-blue-500);
        }
    </style>
</head>

<body class='fullbleed vertical layout'>

    <paper-header-panel class="blue">

        <paper-toolbar>
            <paper-icon-button icon="icons:menu"></paper-icon-button>
            <div>My snazzy toolbar</div>
        </paper-toolbar>

        <div class='content vertical layout'>
            <iron-icon icon="av:snooze" class="icon-snooze"></iron-icon>
            <div class='moContent flex'>More content</div>
            <div>Footer</div>
    </paper-header-panel>
</body>

Answer 1

要使用fullbleed，请确保将iron-positioning模块包含在自定义样式标记中：

<link rel="import" href="iron-flex-layout/iron-flex-layout-classes.html">
<style is="custom-style" include="iron-positioning"></style>

<head>
  <base href="https://polygit.org/polymer+:master/components/">
  <script src="webcomponentsjs/webcomponents-lite.min.js"></script>
  <link rel="import" href="polymer/polymer.html">
  <link rel="import" href="iron-flex-layout/iron-flex-layout-classes.html">
  <style is="custom-style" include="iron-flex iron-positioning"></style>
  <style>
    body {
      border: 2px solid red;
    }
  </style>
</head>

<body class="fullbleed vertical layout">
  Hello world!
</body>

此要求目前尚未记录（至少未在docs for fullbleed中明确说明）。

为什么“fullbleed”布局属性不适用于此代码段？

1 个答案: