एंगुलर 2

Question

में नीचे चिपचिपा पाद लेख मैं कोणीय 2 में एक प्रोजेक्ट का निर्माण कर रहा हूं, और मुझे एक चिपचिपा पाद लेख की आवश्यकता है जो हमेशा पृष्ठ के निचले हिस्से में होना चाहिए, निश्चित नहीं। उदाहरण: http://codepen.io/chriscoyier/pen/uwJjr

'ऐप्लिकेशन' घटक की संरचना इस तरह है:

<header-main></header-main> 
<router-outlet></router-outlet> 
<footer>...</footer> 

शायद, समस्या कोणीय के साथ ही जुड़ा हुआ नहीं है, लेकिन केवल सीएसएस के साथ। हालांकि, मैं इसे इस तरह लागू करने की कोशिश की:

app { 
    min-height: 100%; 
    position: relative; 
} 

footer { 
    position: absolute; 
    bottom: 0; 
    left: 0; 
    width: 100%; 
    height: 271px; 
} 

परिणाम भयानक है:

दिलचस्प बात यह है कि अगर मैं निरीक्षक में पाद लेख की एक स्थिति बंद कर देते हैं, और फिर से पाद लेख पर बारी, ठीक हो जाता है:

समाधान:

app { 
    min-height: 100%; 
    width: 100%; 
    margin-bottom: -271px; 
    display: table; 
} 

header-main, 
router-outlet, 
footer{ 
    display: table-row; 
} 

header-main { 
height: 60px; 
} 

router-outlet { 
    position: absolute; 
} 

footer { 
    height: 271px; 
} 

Answer 1

उदाहरण देखें: Link

जोड़ें सीएसएस:

.page-wrap{position: relative;} 
#add{position: absolute; bottom: 160px;} 

Answer 2

लिंक आपके द्वारा दी गई वास्तव में कैसे यह क्या लगता है आप के लिए पूछ रहे हैं की तरह पूरा करने के लिए एक महान उदाहरण है। मैंने नीचे दिए गए आवश्यक सीएसएस के साथ आपके द्वारा वर्णित तत्वों का उपयोग करने का प्रयास किया है।

Here's a working example।

<div class="app"> 
    <header> 
     Header here 
    </header> 
    Content isn't long enough to push footer to the bottom. 
</div> 
<footer> 
    This is the footer 
</footer> 

html, body { 
    /* make sure the body does not have a margin */ 
    margin: 0; 
    /* this forces the body tag to fill the height of the window */ 
    height: 100%; 
} 
.app { 
    /* the .app div needs to be AT LEAST 100% of the height of the window */ 
    min-height: 100%; 
    /* now that it is 100% the height, we 'pull' the footer up */ 
    /* margin-bottom must be the same height as the footer height below */ 
    margin-bottom: -271px; 
} 
footer{ 
    /* .set the height of the footer */ 
    height: 271px; 
    /* just setting a color so you can see the footer */ 
    background: orange; 
} 

/* the following is not necessary, just showing how a header could be added */ 
header{ 
    height: 30px; 
    background: teal; 
} 

Answer 3

यह मैं चिपचिपा पाद लेख कैसे हल (तय नहीं)

app.component.ts 
..... 
export class AppComponent { 
    clientHeight: number; 

constructor() { 
    this.clientHeight = window.innerHeight; 
} 
} 

app.component.html 

<div [ngStyle]="{'min-height': clientHeight + 'px', 'margin-bottom': '-200px'}"> 
      <!-- 'margin-bootom': '-FooterHeight' --> 
    <app-navbar></app-navbar> 
      <!-- Your Navbar here --> 
    <router-outlet></router-outlet> 
    <div style="height: 200px"></div> 
      <!-- 200px is FooterHeight this will push 
      the footer so it will not overlap if you have very long content --> 
</div> 

<app-footer></app-footer> 
<!-- Your footer here --> 

Answer 4

जबाब जवाब "Phen" करने के लिए।

app.component.ts 
 
..... 
 
export class AppComponent implements AfterViewInit { 
 
    clientHeight: number; 
 
    footerHeight:umber; 
 
    @ViewChild('footer') footerDiv: ElementRef; 
 

 
constructor() { 
 
    this.clientHeight = window.innerHeight; 
 
} 
 
ngAfterViewInit() { 
 
    this.footerHeight=this.footerDiv.nativeElement.offsetHeight; 
 
} 
 
} 
 

 
app.component.html 
 

 
<div [ngStyle]="{'min-height': clientHeight-footerHeight + 'px'}"> 
 
    <app-navbar></app-navbar> 
 
      <!-- Your Navbar here --> 
 
    <router-outlet></router-outlet> 
 
</div> 
 

 
<app-footer #footer></app-footer> 
 
<!-- Your footer here -->