如何指定嵌套Web组件自定义元素的高度，以便它们正确填充分配的空间？

时间：2014-10-19 06:17:12

标签： polymer dart-polymer

enter image description here下面的HTML是从一个简单的示例中复制出来的，用于通过嵌套在这些空格中的子自定义元素正确填充包含主视图（应用页面）中100％高度的问题来复制问题。 （该应用程序使用pub下载的dart-polymer软件包。）容器使用Polymer的布局属性（flex模型）实现。一个简单的自定义元素（文本内容）嵌套在#left div元素中。使用W3C网格布局的更复杂的自定义元素嵌套在#right div元素中。 #right中的四个矩形被正确渲染和着色，除了my-gridcontent的高度溢出空间。

[编辑：截图是我所看到的，而不是我想要的。我希望my-simplecontent能够覆盖#left和my-gridcontent以覆盖#right。应该没有滚动条。]

Devtools显示#left和#right的高度为562px，my-simplecontent为18px，my-gridcontent为626px。嵌套组件的宽度按预期填充各自的空格。我试过{display：block;高度：100％}规则，各种元素没有成功。

相关：cannot get height 100% to work in polymer elements。

Dart SDK：1.7.2。 Dartium：37.0.2062.120（292122）

pubspec.yaml 

dependencies:
  # Dart Polymer and essential libraries
  polymer: ">=0.15.0 <0.16.0"
  core_elements: ">=0.3.1 <0.4.0"
  paper_elements: ">=0.4.0 <0.5.0"
  web_components: ">=0.7.0 <0.8.0"

的index.html 

<!DOCTYPE html>

<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My App</title>

    <!-- include the web_components polyfills with support for Dart. -->
    <script src="packages/web_components/platform.js"></script>
    <script src="packages/web_components/dart_support.js"></script>
    <link rel="import" href="packages/core_elements/core_icons.html">
    <link rel="import" href="packages/polymer/polymer.html">
    <link rel="import" href="packages/core_elements/core_toolbar.html">
    <link rel="import" href="packages/paper_elements/paper_icon_button.html">

</head>
<body unresolved fullbleed>

<polymer-element name="my-app" noscript vertical layout>
    <template>
        <style type="text/css">
            :host { width: 100%; height: 100%; }

            div#left { background: lightyellow; }
            div#right { background: lightblue; }

        </style>

        <core-toolbar id="appToolbar">
            <paper-icon-button id="navmenu" icon="menu"></paper-icon-button>
            <div flex>App</div>
            <paper-icon-button id="morebutton" icon="more-vert"></paper-icon-button>
        </core-toolbar>

        <div horizontal layout flex>
            <div id="left" flex>
                <my-simplecontent id="simple"></my-simplecontent>
            </div>
            <div id="right" flex>
                <my-gridcontent id="grid"></my-gridcontent>
            </div>

        </div>

    </template>
</polymer-element>

<polymer-element name="my-simplecontent" noscript>
    <template>
        <style type="text/css">
            :host { display: block; height: 100%; background: lightcoral; }
        </style>

        Simple content
    </template>
</polymer-element>

<polymer-element name="my-gridcontent" noscript>
    <template>
        <style type="text/css">
            :host {
                display: grid; height: 100%;
                grid-template-columns: 1fr 1fr;
                grid-template-rows: 1fr 1fr;
            }
            #a { grid-column: 1; grid-row: 1; }
            #b { grid-column: 2; grid-row: 1; }
            #c { grid-column: 1; grid-row: 2; }
            #d { grid-column: 2; grid-row: 2; }

            div { height: 100%; }

            .red { background: red; }
            .blue { background: blue; }
            .green { background: green; }
            .yellow { background: yellow; }
        </style>

        <div id="a" class="red">A</div>
        <div id="b" class="blue">B</div>
        <div id="c" class="green">C</div>
        <div id="d" class="yellow">D</div>

    </template>
</polymer-element>


<my-app></my-app>

<!-- bootstrap polymer -->
<script type="application/dart">export 'package:polymer/init.dart';</script>
<script src="packages/browser/dart.js"></script>
</body>
</html>

1 个答案:

答案 0 :(得分：1)

我正在探索的基本问题是如何最好地指定交互式单页Web应用程序的最顶层面板，以便无论嵌套组件的内容如何，​​指定的比例都不会改变。 （The motivation is in Section 1.2 of the CSS Grid Layout Module Level 1: Adapting Layouts to Available Space。）产生最可预测结果的方法是使用CSS网格布局系统而不是顶层的flex。在弹性系统下，布局似乎取决于容器儿童的内容。很可能有更好的方法，因为我还没有一个概念框架来说明较新的HTML布局模块和CSS深度组合规则如何在元素，组件和影子DOM之间进行交互以完成布局。但是下面扩展代码中的方法按预期工作。

index2.html 

!DOCTYPE html>

<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My App</title>

    <!-- include the web_components polyfills with support for Dart. -->
    <script src="packages/web_components/platform.js"></script>
    <script src="packages/web_components/dart_support.js"></script>

    <link rel="import" href="packages/polymer/polymer.html">
    <link rel="import" href="packages/core_elements/core_toolbar.html">

    <polymer-element name="my-flex-element" noscript>
        <template>
            <style type="text/css">
                :host {
                    display: flex; flex-direction: column; height: 100%;
                }
                #r1 { flex-grow: 1; background: lightgreen; }
                #r2 { flex-grow: 1; background: lightpink; }
            </style>
            <div id="r1">col-2 one</div>
            <div id="r2">col-2 two</div>
        </template>
    </polymer-element>

    <polymer-element name="my-flex-element2" vertical layout noscript>
        <template>
            <style type="text/css">
                :host { height: 100%; }
                #r1 { background: lightgreen; }
                #r2 { background: lightpink; }
            </style>
            <div id="r1" flex>col-4 one</div>
            <div id="r2" flex>col-4 two</div>
        </template>
    </polymer-element>

    <polymer-element name="my-grid-element" noscript>
        <template>
            <style type="text/css">
                :host {
                    display: grid; height: 100%;
                    grid-template-columns: 1fr; grid-template-rows: 1fr 1fr;
                }
                #r1 { grid-column: 1; grid-row: 1; background: lightgreen; }
                #r2 { grid-column: 1; grid-row: 2; background: lightpink; }
            </style>
            <div id="r1">col-3 one</div>
            <div id="r2">col-3 two</div>
        </template>
    </polymer-element>

    <polymer-element name="my-app" noscript>
        <template>
            <style type="text/css">
                :host {
                    display: grid;
                    grid-template-columns: 1fr; grid-template-rows: auto 1fr;
                    width: 100%; height: 100%;
                }

                #main {
                    display: grid; height: 100%;
                    grid-template-columns: 1fr 1fr 1fr 1fr; grid-template-rows: 1fr;
                    grid-column: 1; grid-row: 2;
                }

                #col1 {
                    grid-column: 1; grid-row: 1;
                }
                my-flex-element {
                    grid-column: 2; grid-row: 1;
                    background: lightblue;
                }
                my-grid-element {
                    grid-column: 3; grid-row: 1;
                    background: lightyellow;
                }
                my-flex-element2 {
                    grid-column: 4; grid-row: 1;
                    background: gold; }

            </style>

            <core-toolbar id="appToolbar">
                <div>App</div>
            </core-toolbar>

            <div id="main">

                <!-- column 1: html inline component -->
                <style type="text/css">
                    #inline {
                        display: grid; height: 100%;
                        grid-template-columns: 1fr; grid-template-rows: 1fr 1fr;
                        background: #fcfcfc;
                    }
                </style>
                <div id="inline">
                    <style type="text/css">
                        #r1 { grid-column: 1; grid-row: 1; background: lightgreen; }
                        #r2 { grid-column: 1; grid-row: 2; background: lightpink; }
                    </style>
                    <div id="r1">col-1 one</div>
                    <div id="r2">col-1 two</div>
                </div>

                <!-- column 2: polymer + css flex module -->
                <my-flex-element></my-flex-element>

                <!-- column 3: polymer + css grid module -->
                <my-grid-element></my-grid-element>

                <!-- column 4: polymer + polymer flex layout attributes -->
                <my-flex-element2></my-flex-element2>

            </div>
        </template>

    </polymer-element>

</head>
<body unresolved fullbleed>


<my-app></my-app>

<!-- bootstrap polymer -->
<script type="application/dart">export 'package:polymer/init.dart';</script>
<script src="packages/browser/dart.js"></script>

</body>
</html>

enter image description here

相关问题
最新问题