-1

I have created a footer for my web page in angular. But it overlaps the content in the website. How do i get red of this? Output

Code:

<footer class="footer bg-dark fixed-bottom footer-design">
  <div class="text-white text-center mr-3">
      © 2019 Copyright
  </div>
</footer>
Alwin
  • 15
  • 4
  • Possible duplicate of [Preventing fixed footer from overlapping content](https://stackoverflow.com/questions/2744690/preventing-fixed-footer-from-overlapping-content) – hsusanoo Jan 31 '19 at 12:04

2 Answers2

0

It's an HTML layout question - doesn't related to Angular. You don't even need to use bootstrap for that. You can use flex - set the footer with flex-basis: 50px; (for example) and the rest with flex-grow:1;. This will set a fix size for your footer and will strech the rest on the entire page.

body,
html {
  height: 100%;
  padding: 0;
  margin: 0;
}

.page {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.content {
  flex-grow: 1;
}

.footer {
  flex-basis: 50px;
  background-color: black;
  color: white;
  text-align: center;
}
<div class="page">
  <div class="content">Content here</div>
  <div class="footer">Footer</div>
</div>

If you don't want the footer the stick to the bottom, remove the container's height:100%

body,
html {
  height: 100%;
  padding: 0;
  margin: 0;
}

.page {
  display: flex;
  flex-direction: column;
}

.content {
  flex-grow: 1;
}

.footer {
  flex-basis: 50px;
  background-color: black;
  color: white;
  text-align: center;
}
<div class="page">
  <div class="content">Content here</div>
  <div class="footer">Footer</div>
</div>
Itay Gal
  • 10,706
  • 6
  • 36
  • 75
  • But the method you mentioned above the footer appears immediately next to end of the page content.The problem is when there is only half of the content in the page the footer appears in the middle of the page.. – Alwin Jan 31 '19 at 12:13
  • That's how footer is being implemented usually. You can remove the `height: 100%` of the container class if you don't want it to be at the bottom of the entire page. – Itay Gal Jan 31 '19 at 12:15
0

Just remove fixed-bottom class from footer.

<footer class="footer bg-dark footer-design">
  <div class="text-white text-center mr-3">
      © 2019 Copyright
  </div>
</footer>
jqueryHub
  • 209
  • 2
  • 15