कोणीय सामग्री डिजाइन में एक निश्चित पाद लेख कैसे बनाएं

Question

यह मेरा पृष्ठ लेआउट है।

<div layout="column" layout-fill ng-controller="MainCtrl as mc"> 
     <header> 

     <md-toolbar md-scroll-shrink> 
      <div layout="row" layout-align="center center" flex> 
      HEADER INFO 
      </div> 
     </md-toolbar> 

     </header> 

     <main> 
     <div ui-view> 
     </div> 
     </main> 

     <footer> 
     <md-toolbar class="md-scroll-shrink"> 
      <div layout="row" layout-align="center center" flex> 
      FOOTER INFO 
      </div> 
     </md-toolbar> 
     </footer> 

    </div> 

वर्तमान में फ़ूटर मुख्य सामग्री के बाद प्रदर्शित हो रहा है। मुख्य के आकार के आधार पर या तो स्क्रीन के बीच कहीं भी प्रदर्शित करने वाले पेजर या पृष्ठ की ऊंचाई से नीचे चला जाता है।

मैं चाहता हूं कि पाद लेख हमेशा स्क्रीन के नीचे तय किया जाए। और मुख्य आकार के आधार पर, मुख्य सामग्री में एक स्क्रॉल होना चाहिए।

क्या कोई इस पर मेरी सहायता कर सकता है?

Answer 1

आपको केवल <main flex> और सीएसएस overflow-y: auto; जोड़ने की आवश्यकता है। पृष्ठ के तल पर http://plnkr.co/edit/GQjcrqhwB2T5ohZwC5EL?p=preview

Answer 2

प्लेस एक चटाई-उपकरण पट्टी और पाठ केंद्रित करने के लिए इस तरह .:

<mat-toolbar color='primary'> 
    <span class='spacer'></span> 
    <h3>© Copyright Angular Apps 2017.</h3> 
    <span class='spacer'></span> 
</mat-toolbar> 

इस सीएसएस का उपयोग करते हुए निम्नलिखित सीएसएस स्पेसर का उपयोग करें:: इस plunker देखें

.spacer { 
    -webkit-box-flex: 1; 
    -ms-flex: 1 1 auto; 
    flex: 1 1 auto; 
} 

इस पाने के लिए: