how to keep a footer at the bottom of the page, even if the content grows?

Question

I'm developing a single-page and I have a shared footer layout, I want to keep it at the bottom of the page always and even I would like to know if there is a way not to visualize it in some route even though it has been declared in the app.component.html

I have tested on scss all possible footer positions

app.component.html

<div class="grid-container">
<main [@fadeAnimation]="o.isActivated ? o.activatedRoute : ''">
<router-outlet #o="outlet"></router-outlet>
</main>
<rb-footer class="footer"></rb-footer>
</div>
<rb-modal></rb-modal>

app.component.scss

:host {
    .grid-container {
      display: grid;
      grid-template-rows: auto 1fr auto;
      grid-template-columns: auto;
      height: 100vh;
    }

.footer {
  position: initia
  width:100%;
  height:40px;

  }

  }

Try changing the height of your `grid-container` to `height: calc(100vh - 40px)` and setting `max-height: calc(100vh - 40px)` You may need to add a `overflow-y: auto` to the container. — Jacopo Sciampi, Jun 03 '19 at 12:07

score 3 · Answer 1 · answered Jun 03 '19 at 12:14

HERE COMES THE FLEX !!

header, footer, content { display: block; }

container {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  max-height: 100vh;
  height: 100vh;
  overflow: hidden;
}

header {
  flex: 0 0 50px;
  height: 50px;
  background: coral;
}

footer {
  flex: 0 0 50px;
  background: coral;
}

content {
  flex: 1 1 auto;
  overflow: hidden;
  overflow: auto;
  background: teal;
}

<container>
  <header></header>

  <content>
    <div style="width: 200vw; height: 200vh;"></div>
  </content>

  <footer></footer>
</container>

With flex layout, you never have to worry about your content flow : it'as handled. Better yet, Angular has its own implementation : just see how simple it is !

score 2 · Answer 2 · edited Jun 20 '20 at 09:12

2

footer {position fixed; bottom: 0;}

hope this helps ;)

edited Jun 20 '20 at 09:12

Community

1
1

answered Jun 03 '19 at 12:08

user11593656

21
1

score 0 · Answer 3 · answered Jun 03 '19 at 12:12

its better to create footer.html and includes the file in app.html if you want to show it on every page or else if you want to add in some files then simply include header in last section of respective page. You can add footer like this :

in app file :

<div data-ng-include=" 'tpl/blocks/footer.html' " >

or else in separate file :

<div  ng-include="'tpl/blocks/footer.html'">
    {% include 'blocks/footer.html' %}
</div>

score 0 · Answer 4 · answered Jun 03 '19 at 12:23

FOR SINGLE PAGE APPLICATIONS

.footer{
position:fixed;
bottom:0px;
background-color:red;
width:100%;
height:30px;
}
.footer p{
text-align:center;
color:white;
margin-bottom:0px;
}

.header{
background-color:blue;
height:30px;
}

.header p{
text-align:center;
color:white;
margin-bottom:0px;
}

<div class="header">
<p>Header-logo<p>
</div>
<div class="footer">
<p>Footer-logo<p>
</div>

how to keep a footer at the bottom of the page, even if the content grows?

4 Answers4

HERE COMES THE FLEX !!

footer {position fixed; bottom: 0;}