Footer to be at the end of the page, not fixed [duplicate]

问题

I use Bootstrap 4 and angular 7. I have main component where I have header, place for my component and footer. My header and footer is separate component. This is example:

<app-header></app-header>
<div class="container">
  <div class="row">
    <div class="col-md-12">
      <router-outlet></router-outlet>
    </div>
  </div>
</div>
<app-footer></app-footer>

I want to my footer to be on end of the page, not fixed. But hi is Always fixed. This is my footer:

<footer class="footer fixed-bottom">
    ...
</footer>

回答1:

Use flexboxes.

html, body {
  height: 100%;
}

.container {
  height: 100%;
  background: lightgray;
  display: flex;
  justify-content: flex-start;
  align-items: stretch;
  flex-direction: column
}

header {
  flex: 0 0 50px;
  background: lightblue;
}

content {
  flex: 1;
  background: lightgreen;
}

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

<div class="container">
  <header></header>
  <content>
    <!-- <div style="height: 1800px"></div> -->
  </content>
  <footer></footer>
</div>

As you can see, the footer is always at the end of the page, provided that the container is the size of the said page.

If you uncomment the div, you will see the container expands and keeps your footer at the end of the page.

回答2:

Remove the class fixed-bottom from your footer tag

<footer class="footer">
    ...
</footer>

NOTE: if your page content is not reaching the view height you'll have to add a min-height style to your page in order to get the footer at the bottom of the view

HTML:

<div class="my-container">
  <!-- your page content -->
</div>

CSS:

.my-container {
  min-height: 800px;
  /* 800px as your view height, change it accordingly */
}

回答3:

end of the page, not fixed.

if it means to say: Footer at the bottom of the content. Which is not viewable untill we scroll it down to the last of the page.

You just need to make the footer tag with no class will solve your problem.

<footer>
   //Your Footer Content
</footer>

end of the page, not fixed.

if it means to say: Sticky Footer than add the following code in footer.component.css

.footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 60px;
    line-height: 60px;
    background-color: #f5f5f5;
}

来源：https://stackoverflow.com/questions/54105577/footer-to-be-at-the-end-of-the-page-not-fixed

标签

angular

bootstrap-4