聚合物紙廠：如何使其在紙抽屜面板內容浮動

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>