gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-04 16:43:03 26 4
gpt4 key购买 nike

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

  • 浏览器:Firefox v35
  • 操作系统:Linux
  • polymer :v1.4

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

    Should work

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

    我在这里想念什么?

    同样在 Chrome v49 64bit 上,页面呈现如下:

    Enter image description here

    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
    Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
    广告合作:1813099741@qq.com 6ren.com