layout - 为什么 'fullbleed' 布局属性在此代码段中不起作用？-6ren

layout - 为什么 'fullbleed' 布局属性在此代码段中不起作用？

转载作者：行者123 更新时间：2023-12-04 16:43:03

26

4

我正在尝试使用全屏纸页眉面板..

浏览器:Firefox v35

操作系统:Linux

polymer :v1.4

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

如果我明确设置 body height:100vh , body 标签拉伸(stretch)，但绿色区域不会“弯曲”

我在这里想念什么？

同样在 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>

最佳答案

使用 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 中没有明确说明)。

关于layout - 为什么 'fullbleed' 布局属性在此代码段中不起作用？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36769848/

26

4

0

文章推荐： jakarta-ee - 在 WAR 模块中打包企业 Bean

文章推荐： scala - 为什么在 Scala 中使用 '~' 运算符会给我一个负值

文章推荐： aurelia - 如何使用Aurelia从网址获取参数

文章推荐： common-lisp - cl-mysql的代码中 "#+"是什么意思？

实例分析Try {} Catch{} 作用
今天有小伙伴给我留言问到，try{...}catch(){...}是什么意思？它用来干什么？简单的说他们是用来捕获异常的下面我们通过一个例子来详细讲解下
html - 列表社交媒体链接的 ARIA 作用
我正在努力提高网站的可访问性，但我不知道如何在页脚中标记社交媒体链接列表。这些链接指向我在 facecook、twitter 等上的帐户。我不想用 role="navigation" 标记这些链接，因
java.util.Timer SystemTime 作用？
说现在是 6 点，我有一个 Timer 并在 10 点安排了一个 TimerTask。之后，System DateTime 被其他服务(例如 ntp)调整为 9 点钟。我仍然希望我的 TimerTas
php - 什么是 Doctrine hydration 作用？
就目前而言，这个问题不适合我们的问答形式。我们希望答案得到事实、引用资料或专业知识的支持，但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开，visit the
python入门:argparse浅析 nargs='+'作用
我就废话不多说了，大家还是直接看代码吧~ ? 1
Maven是什么?Maven的概念+作用+仓库的介绍+常用命令的详解
Maven系列1 1.什么是Maven？ Maven是一个项目管理工具，它包含了一个对象模型。一组标准集合，一个依赖管理系统。和用来运行定义在生命周期阶段中插件目标和逻辑。核心功能 Mav

首页

博学

6Ren·AI

商城

layout - 为什么 'fullbleed' 布局属性在此代码段中不起作用？