Html 聚合物芯脚手架含量高度达到100%不工作

我有下面定义的聚合物元素（）。我的目标是使

conversation\u容器

具有100%的高度，以最终将

message\u box\u容器

移动到整个面板的底部。我需要家长有100%的身高，以便

位置：绝对；底部：0使子对象在底部浮动。我永远无法使
对话容器
具有100%的高度（不是固定高度），我不知道为什么。我猜要么是脚手架上的一只虫子，要么是我遗漏了一些显而易见的东西

<polymer-element name="messenger-element">
<template>
    <style>
        :host {
        width: 100%;
        height: 100%;
        }
        #container{
        height: 100%;
        }
        #core_header_panel {
        background-color: rgb(255, 255, 255);
        }
        #core_toolbar {
        color: rgb(255, 255, 255);
        background-color: rgb(79, 125, 201);
        }
        #core_menu {
        font-size: 16px;
        }
        #paper_fab {
        position: absolute;
        bottom: 20px;
        right: 20px;
        }
        #input_container {
        bottom: 0px;
        width: 100%;
        position: absolute;

        }
        #message_box_container{
        padding: 10px;
        }

        #conversation_container{
        position: relative;
        }
    </style>
    <div id="container">
        <core-scaffold>
            <core-header-panel mode="seamed" id="core_header_panel" navigation flex>
                <core-toolbar id="core_toolbar"></core-toolbar>
                <core-menu valueattr="label" id="core_menu" theme="core-light-theme">
                    <core-item id="core_item" icon="settings" label="Item1" horizontal center layout></core-item>
                    <core-item id="core_item1" icon="settings" label="Item2" horizontal center layout></core-item>
                </core-menu>
                <paper-fab icon="add" id="paper_fab"></paper-fab>
            </core-header-panel>
            <div tool>Messenger</div>
            <div id="conversation_container">
                <div id="message_box_container" horizontal center layout>
                    <paper-input label="Enter a message" id="paper_input" flex></paper-input>
                    <paper-icon-button icon="send"></paper-icon-button>
                    <paper-shadow z="1"></paper-shadow>
                </div>
            </div>
        </core-scaffold>
    </div>
</template>
<script type="application/dart" src="messenger-element.dart"></script>


：主持人{
宽度：100%；
身高：100%；
}
#容器{
身高：100%；
}
#芯头面板{
背景色：rgb（255、255、255）；
}
#核心工具栏{
颜色：rgb（255、255、255）；
背景色：rgb（79125201）；
}
#核心菜单{
字体大小：16px；
}
#造纸厂{
位置：绝对位置；
底部：20px；
右：20px；
}
#输入容器{
底部：0px；
宽度：100%；
位置：绝对位置；
}
#信息盒容器{
填充：10px；
}
#集装箱{
位置：相对位置；
}
信息员

不确定我是否跟随了你，但这是我为了让它工作而改变的：

要使内容适合主区域，请使用“适合”属性

 <div id="conversation_container" fit>

我添加了边框，因此可以清楚地看到它的开始和结束位置。
是否允许使用
核心抽屉面板
和
核心标题面板
而不是
核心脚手架
元素？如果是这样，下面是我的解决方案。它不使用任何CSS进行定位。仅涉及聚合物布局属性。以下是JSFIDLE和代码片段：




[出票人]{
盒影：1px01pxRGBA（0,0,0,0.1）；
}
[主要]{
身高：100%；
}
#芯头面板{
背景色：rgb（255、255、255）；
}
#核心工具栏{
颜色：rgb（255、255、255）；
背景色：rgb（79125201）；
}
#核心菜单{
字体大小：16px；
}
#造纸厂{
位置：绝对位置；
底部：20px；
右：20px；
}
#信息盒容器{
填充：10px；
边框样式：实心；
边框宽度：5px；
}
#头衔{
颜色：白色；
背景色：rgb（82110156）；
}
#集装箱{
背景色：rgb（238238238）；
}
信息员
内容
聚合物（'my-element'，{}）；
是的，我找到了一个类似的解决方案，但是，如果我使用该解决方案，则填充将无法在对话容器上正常工作。填充将无法正确应用于Conversation_容器div（）的右侧。这对我来说很有效-这是我需要尝试的fit属性。是的，就是这样！谢谢
 #input_container {}
 #message_box_container{
   padding: 10px;
   border-style: solid;
   border-width: 5px;
   position: absolute;
   bottom: 0px;
   width: 100%;
 }
 #conversation_container{
   border-style: dotted;
   border-width: 2px;
 }