css - 聚合物1.0纸元素: paper-card-action section is not sticking to the bottom of paper-card

Question

HTML

<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>

CSS:

<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>

自定义样式:

<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>

输出(请看附图)

我怎样才能做到这一点？

Answer 1

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

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

此外，我认为您的自定义样式示例存在错字:

--paper-card-actions { 应该是 --paper-card-actions: {