Polymer 如何指定嵌套web组件自定义元素的高度，以便它们正确填充分配的空间？
下面的HTML是从一个简单的示例复制而来的，该示例旨在通过嵌套在这些空间中的子自定义元素，从包含主视图（应用程序页面）的区域中正确填充100%的高度。（应用程序使用pub下载的dart polymer包。）容器使用polymer的布局属性（flex模型）实现。一个简单的自定义元素（文本内容）嵌套在#left div元素中。使用W3C网格布局的更复杂的自定义元素嵌套在#right div元素中。#右侧的四个矩形被正确渲染和着色，只是我的gridcontent的高度溢出了空间 [编辑：屏幕截图是我看到的，而不是我想要的。我想让simplecontent向左覆盖，gridcontent向右覆盖。不应该有滚动条。] Devtools用562px显示左和右的高度，用18px显示simplecontent，用626px显示gridcontent。嵌套构件的宽度按预期填充其各自的空间。我用各种元素尝试了{display:block；height:100%}规则，但没有成功 相关： Dart SDK:1.7.2。 飞镖：37.0.2062.120（292122） 公开发行Polymer 如何指定嵌套web组件自定义元素的高度，以便它们正确填充分配的空间？,polymer,dart-polymer,Polymer,Dart Polymer,下面的HTML是从一个简单的示例复制而来的，该示例旨在通过嵌套在这些空间中的子自定义元素，从包含主视图（应用程序页面）的区域中正确填充100%的高度。（应用程序使用pub下载的dart polymer包。）容器使用polymer的布局属性（flex模型）实现。一个简单的自定义元素（文本内容）嵌套在#left div元素中。使用W3C网格布局的更复杂的自定义元素嵌套在#right div元素中。#右侧的四个矩形被正确渲染和着色，只是我的gridcontent的高度溢出了空间 [编辑：屏幕截图是我看
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"
依赖项：
#Dart聚合物和基本库
聚合：“>=0.15.0=0.3.1=0.4.0=0.7.0我正在探索的基本问题是如何最好地指定交互式单页web应用程序的最顶部面板，以便无论嵌套组件的内容如何，指定的比例都不会改变。（）产生最可预测结果的方法是使用CSS网格布局系统，而不是在顶层使用flex。在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>
！DOCTYPE html>
我的应用程序
：主持人{
显示：柔性；柔性方向：柱；高度：100%；
}
#r1{flex-grow:1；背景：浅绿色；}
#r2{flex-grow:1；背景：浅粉色；}
col-2-1
第二列
：主机{高度：100%；}
#r1{背景：浅绿色；}
#r2{背景：浅粉色；}
col-4-1
第4列第2列
：主持人{
显示：网格；高度：100%；
网格模板列：1fr；网格模板行：1fr 1fr；
}
#r1{网格列：1；网格行：1；背景：浅绿色；}
#r2{网格列：1；网格行：2；背景：浅粉色；}
col-3-1
第二列
：主持人{
显示：网格；
网格模板列：1fr；网格模板行：自动1fr；
宽度：100%；高度：100%；
}
#主要{
显示：网格；高度：100%；
网格模板列：1fr 1fr 1fr 1fr；网格模板行：1fr；
网格列：1；网格行：2；
}
#可乐{
网格列：1；网格行：1；
}
我的弹性元件{
网格列：2；网格行：1；
背景：浅蓝色；
}
我的网格元素{
网格列：3；网格行：1；
背景：浅黄色；
}
my-flex-element2{
网格列：4；网格行：1；
背景：黄金；}
应用程序
#内联{
显示：网格；高度：100%；
网格模板列：1fr；网格模板行：1fr 1fr；
背景:#fcfc；
}
#r1{网格列：1；网格行：1；背景：浅绿色；}
#r2{网格列：1；网格行：2；背景：浅粉色；}
第1列
第二列
出口“包装：聚合物/初始省道”；
这会填满整个浏览器窗口，不会显示滚动条。我觉得这很好。您可以添加一个屏幕截图，其中包含您想要的与当前不同的标记吗？（在Dartium版本38.0.2125.0（292384）（64位）
和Chrome版本38.0.2125.104（64位）
中试用）@GünterZöchbauer：添加了屏幕截图。我在Chrome v38中得到了相同的布局，而不是您描述的布局。我使用稳定版本的DE/Dart SDK，但我正在拉开发频道发行版来测试Dartium v38（假设它在发行版中）.OSX 10.10。@GünterZöchbauer：我没有找到64位Dartium v38 for OSX的发行版。开发频道构建的链接是针对Dartium-macos-ia32-release.zip的。请提供建议。我使用这个（前沿）@GünterZöchbauer darteditor-macos-x64.zip（前沿）包括Dartium v37。我不明白为什么我们的结果不同。你在使用哪个操作系统？
!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>