CODEWITHSUNDEEP
cssangularangular-flex-layout
dhana
dhana

Reputation: 887

Footer issue using flexlayout

using flexlayout in my project, footer not render properly

scenario: if there is no text then footer should be stick in bottom of screen, if more then screen content then footer should be push to bottom of screen.

below is my code:

<mat-sidenav-container fxLayout="column" fxFlexFill>
   <mat-sidenav></mat-sidenav>    
   <mat-sidenav-content>
     <header>
       <mat-toolbar></mat-toolbar>
     </header>
     <section fxFlexFill> 
       <!--Content Area -->   
     </section>
     <footer>
        <mat-toolbar></mat-toolbar>
     </footer>    
   </mat-sidenav-content>    
</mat-sidenav-container>

above code taking extra space in footer its mean appearing scroll bar even though less content. can suggest what i missed here.

Using css

body,html{
height:100%;
}

Upvotes: 0

Views: 2605

Answers (3)

Emeric
Emeric

Reputation: 6915

Here is a solution in few lines:

app.component.html:

<div fxLayout="column" fxFlexFill>
    <app-header></app-header> // your header
    <div fxFlex>
        <router-outlet></router-outlet> // your content
    </div>
    <app-footer></app-footer> // your footer
</div>

styles.css:

html, body {
    height: 100%;
    box-sizing: border-box;
    margin: 0;
}

Another alternative if you prefer to fill the footer instead of your content:

app.component.html:

<div fxLayout="column" style="height: 100%;">
    <app-header></app-header> // your header
    <router-outlet></router-outlet> // your content
    <app-footer fxFlexOffset="auto"></app-footer> // your footer
</div>

styles.css:

html, body {
    height: 100%;
}

Upvotes: 0

Ravi Rajpurohit
Ravi Rajpurohit

Reputation: 528

In order to set the footer always at bottom you can try the below code

<mat-sidenav-container class="container">
<mat-sidenav mode="side" opened>Sidenav content</mat-sidenav>
<mat-sidenav-content>
    <div fxLayout="column" style="height:100vh;">
        <div fxFlex>content goes here</div>
        <div fxFlex="50px" fxLayoutAlign="center center" class="footer">footer</div>
    </div>
</mat-sidenav-content>

Here I have created a demo using Angular Material and FlexLayout

https://github.com/Ravi-Rajpurohit/mat-sideNav-stickyFooter

and have a look at my git repo

https://github.com/Ravi-Rajpurohit/mat-sideNav-stickyFooter

Upvotes: 1

Alex
Alex

Reputation: 2800

Your question is not very clear, however, in order to get the footer appearing at the bottom of the page using flexbox then you need to add the following flex styling to the content above it:

flex: 1 0 auto;

The first '1' in this line basically means that the content will grow to fit any available space. Here is a fiddle that demonstrates this in action:

http://jsfiddle.net/41ec8kvj/

You can also find a variety of other methods to do the same thing here: https://css-tricks.com/couple-takes-sticky-footer/

Upvotes: 1

Related Questions