Question

我有以下定义的聚合物元素（http://jsfiddle.net/mLT5G/98/）。我的目标是让conversation_container具有100％的高度，最终将message_box_container移动到整个面板的底部。我需要父母有一个100％的高度，以便position: absolute; bottom: 0;孩子让它漂浮在底部。我永远无法让conversation_container拥有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>

Answer 1

不确定我是否跟着你，但这是我改变它以使它工作的原因：

要使内容适合主区域，请使用fit属性。

 <div id="conversation_container" fit>

然后在css上

 #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;
 }

我添加了边框，因此很明显它的开始和结束位置。

Answer 2

您是否可以使用core-drawer-panel和core-header-panel代替core-scaffold元素？如果是这样，这是我的解决方案。它不使用任何CSS进行定位。仅涉及聚合物布局属性。这是jsfiddle和snippet：

http://jsfiddle.net/kreide/jebczmkr/

＆＃13;

<link rel="import" href="http://www.polymer-project.org/components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="http://www.polymer-project.org/components/core-scaffold/core-scaffold.html">
<link rel="import" href="http://www.polymer-project.org/components/core-header-panel/core-header-panel.html">
<link rel="import" href="http://www.polymer-project.org/components/core-toolbar/core-toolbar.html">
<link rel="import" href="http://www.polymer-project.org/components/core-item/core-item.html">
<link rel="import" href="http://www.polymer-project.org/components/paper-fab/paper-fab.html">
<link rel="import" href="http://www.polymer-project.org/components/paper-input/paper-input.html">
<link rel="import" href="http://www.polymer-project.org/components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="http://www.polymer-project.org/components/paper-shadow/paper-shadow.html">
<polymer-element name="my-element">
  <template>
    <style>
      [drawer] {
        box-shadow: 1px 0 1px rgba(0, 0, 0, 0.1);
      }
      [main] {
        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;
      }
      #message_box_container {
        padding: 10px;
        border-style: solid;
        border-width: 5px;
      }
      #title {
        color: white;
        background-color: rgb(82, 110, 156);
      }
      #conversation_container {
        background-color: rgb(238, 238, 238);
      }
    </style>
    <core-drawer-panel transition id="coredrawerpanel" touch-action fit>
      <section drawer>
        <core-header-panel fit mode="seamed">
          <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>
      </section>
      <section main>
        <core-header-panel fit mode="seamed">
          <core-toolbar id="title">
            <core-icon-button id="menuButton" icon="menu" core-drawer-toggle/></core-icon-button> <span>Messenger</span>

          </core-toolbar>
          <div class="content" fit>
            <div id="conversation_container" vertical layout style="height:100%"> <span flex>Content</span>
              <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>
          </div>
        </core-header-panel>
      </section>
    </core-drawer-panel>
  </template>
  <script>
    Polymer('my-element', {});
  </script>
</polymer-element>

<body fullbleed>
  <my-element></my-element>
</body>

＆＃13;

聚合物核心 - 支架含量高度达到100％不起作用

2 个答案: