聚合物纸厂：如何使其在纸抽屉面板内容浮动

Question

参考Polymer todo-list app，我试图将一个造纸厂放置在todo-view.html中，以便滚动主要内容将导致在晶圆厂总是漂浮在右下角。

我的代码看起来像这样

<paper-drawer-panel id="paperDrawerPanel"> 
    <div drawer> 

    <!-- Drawer Toolbar --> 
    <paper-toolbar id="drawerToolbar"></paper-toolbar> 

    <!-- Drawer Content --> 
    <paper-menu class="list" attr-for-selected="data-route" selected="[[route]]"> 
    ... 
    </paper-menu> 
    </div> 
    <paper-header-panel main> 

    <!-- Main Toolbar --> 
    <paper-toolbar id="mainToolbar"> 
     ... 
    </paper-toolbar> 

    <!-- Main Content --> 
    <div class="content"> 

     <todo-list todos="{{todos}}" 
       filter-by="{{route}}" 
       on-delete-todo="deleteTodo"> 
     </todo-list> 

     <todo-input on-add-todo="addTodo"></todo-input> 
     <!-- fab does not float. --> 
     <paper-fab mini icon="favorite" title="heart"></paper-fab> 
    </div> 
    </paper-header-panel> 
</paper-drawer-panel> 

如何使纸张晶圆厂总是浮右下角甚至当我通过内容滚动？

Answer 1

这对我有用。添加到您的CSS。

paper-fab { 
     margin-left: 10px; 
     margin-right: 10px; 
     margin-bottom: 70px; 
     position: fixed; 
     right: 25px; 
     bottom: 25px;   
    } 

而且你的标签是这样的：

<paper-fab icon="favorite" title="heart"></paper-fab>