聚合物1.0纸元素：纸卡动作部分没有粘在纸卡的底部

Question

HTML

＆＃13;

＆＃13;

<paper-card class="media-responsive" heading="Nearest customers">
  <div class="card-content">
    <nearest-customers id="nearestCustomers" card-view-max-records="3"></nearest-customers>
  </div>
  <div class="card-actions card-footer">
    <div style="float:right;text-align:right">
      <a data-route="allcustomers" href="/full-customer-list">Full customer list&nbsp;
                     <iron-icon class="iron-icon-12" icon="fa:arrow-right"></iron-icon></a>
    </div>
    <div class="clear"></div>
  </div>
</paper-card>

＆＃13;

＆＃13;

＆＃13;

CSS：

＆＃13;

＆＃13;

<style type="text/css">
  paper-card {
     position: relative !important;
     width: 100%;
     margin-bottom: 10px;
     height: auto !important;
  }
  .card-actions {
     position: relative !important;
     bottom: 0 !important;
  }
</style>

＆＃13;

＆＃13;

＆＃13;

自定义样式：

＆＃13;

＆＃13;

<style is="custom-style">
     paper-card {
      --paper-card-header-color: #000000;
      
      --paper-card-header-text:{
        font-size:15px;
        margin:0 auto;
      };
      
      --paper-card-header: {
        margin:0 auto;
        border-bottom:1px solid #dddddd !important;
        padding:0;
        margin-bottom:0px !important;
      };
            
      --paper-card-actions {
        border-top: 1px solid #e8e8e8;
        padding: 5px 16px;
        position:relative !important;
        @apply(--paper-card-actions);
      }
  }
</style>

＆＃13;

＆＃13;

＆＃13;

输出（请参阅附图）

我怎样才能做到这一点？

Answer 1

我过去使用iron-flex-layout解决了这个问题。

你也可以使用--paper-card-actions解决它并定义合适的flex样式。

此外，我认为您的自定义样式示例存在拼写错误：

--paper-card-actions {应为--paper-card-actions: {