我为页脚制作了一个新组件。我使用了下面提供的模板，但页脚不在应有的底部。我已经使用服务应用了页脚组件，只是为了使其在某些路径（例如登录等）上不可见。
我尝试应用给出的许多解决方案，但是没有运气，任何人都可以帮忙吗？
app.component.html
<app-navbar></app-navbar>
<app-breakingnews></app-breakingnews>
<ngx-spinner bdColor="rgba(51,51,51,0.8)" size="medium" type="ball-atom" color="#d9534f" [fullScreen]="true">
<p style="font-size: 20px; color:white;padding-top: 50px;"><strong> Fetching All the News......</strong></p>
</ngx-spinner>
<router-outlet></router-outlet>
<app-footer></app-footer>
footer.component.html
<footer class="footer kilimanjaro_area" *ngIf="footer.visible">
<!-- Top Footer Area Start -->
<div class="foo_top_header_one section_padding_100_70">
<div class="container">
<div class="row">
<div class="col-12 col-md-6 col-lg-3">
<div class="kilimanjaro_part">
<h5>About Us</h5>
<p>It includes rich features & contents. It's designed & developed based on One Page/
Multi-page Layout,blog themes,world press themes and blogspot. You can use any layout
from any demo anywhere.</p>
<p>webblogoverflow is completely creative, clean & 100% responsive website. Put your
business into next level with Webublogoverflow.</p>
</div>
<div class="kilimanjaro_part m-top-15">
<h5>Social Links</h5>
<ul class="kilimanjaro_social_links">
<li><a href="#"><i class="fa fa-facebook" aria-hidden="true"></i> Facebook</a></li>
<li><a href="#"><i class="fa fa-twitter" aria-hidden="true"></i> Twitter</a></li>
<li><a href="#"><i class="fa fa-pinterest" aria-hidden="true"></i> Pinterest</a></li>
<li><a href="#"><i class="fa fa-youtube" aria-hidden="true"></i> YouTube</a></li>
<li><a href="#"><i class="fa fa-linkedin" aria-hidden="true"></i> Linkedin</a></li>
</ul>
</div>
</div>
<div class="col-12 col-md-6 col-lg-3">
<div class="kilimanjaro_part">
<h5>Tags Widget</h5>
<ul class=" kilimanjaro_widget">
<li><a href="#">Classy</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Creative</a></li>
<li><a href="#">One Page</a></li>
<li><a href="#">Multipurpose</a></li>
<li><a href="#">Minimal</a></li>
<li><a href="#">Classic</a></li>
<li><a href="#">Medical</a></li>
</ul>
</div>
<div class="kilimanjaro_part m-top-15">
<h5>Important Links</h5>
<ul class="kilimanjaro_links">
<li><a href="#"><i class="fa fa-angle-right" aria-hidden="true"></i>Terms &
Conditions</a></li>
<li><a href="#"><i class="fa fa-angle-right" aria-hidden="true"></i>About Licences</a>
</li>
<li><a href="#"><i class="fa fa-angle-right" aria-hidden="true"></i>Help & Support</a>
</li>
<li><a href="#"><i class="fa fa-angle-right" aria-hidden="true"></i>Careers</a></li>
<li><a href="#"><i class="fa fa-angle-right" aria-hidden="true"></i>Privacy Policy</a>
</li>
<li><a href="#"><i class="fa fa-angle-right" aria-hidden="true"></i>Community &
Forum</a></li>
</ul>
</div>
</div>
<div class="col-12 col-md-6 col-lg-3">
<div class="kilimanjaro_part">
<h5>Latest News</h5>
<div class="kilimanjaro_blog_area">
<div class="kilimanjaro_thumb">
<img class="img-fluid"
src="https://3.bp.blogspot.com/--C1wpaf_S4M/W7V__10nRoI/AAAAAAAAK24/1NSfapuYSIY0f0wzXY9NgoH0FjQLT07YACKgBGAs/s1600/maxresdefault.jpg"
alt="">
</div>
<a href="#">Your Blog Title Goes Here</a>
<p class="kilimanjaro_date">21 Jan 2018</p>
<p>Lorem ipsum dolor sit amet, consectetur</p>
</div>
<div class="kilimanjaro_blog_area">
<div class="kilimanjaro_thumb">
<img class="img-fluid"
src="https://3.bp.blogspot.com/--C1wpaf_S4M/W7V__10nRoI/AAAAAAAAK24/1NSfapuYSIY0f0wzXY9NgoH0FjQLT07YACKgBGAs/s1600/maxresdefault.jpg"
alt="">
</div>
<a href="#">Your Blog Title Goes Here</a>
<p class="kilimanjaro_date">21 Jan 2018</p>
<p>Lorem ipsum dolor sit amet, consectetur</p>
</div>
<div class="kilimanjaro_blog_area">
<div class="kilimanjaro_thumb">
<img class="img-fluid"
src="https://3.bp.blogspot.com/--C1wpaf_S4M/W7V__10nRoI/AAAAAAAAK24/1NSfapuYSIY0f0wzXY9NgoH0FjQLT07YACKgBGAs/s1600/maxresdefault.jpg"
alt="">
</div>
<a href="#">Your Blog Title Goes Here</a>
<p class="kilimanjaro_date">21 Jan 2018</p>
<p>Lorem ipsum dolor sit amet, consectetur</p>
</div>
</div>
</div>
<div class="col-12 col-md-6 col-lg-3">
<div class="kilimanjaro_part">
<h5>Quick Contact</h5>
<div class="kilimanjaro_single_contact_info">
<h5>Phone:</h5>
<p>+255 789 54 50 40 <br> +2255 766 90 94 00</p>
</div>
<div class="kilimanjaro_single_contact_info">
<h5>Email:</h5>
<p>[email protected] <br> [email protected]</p>
</div>
</div>
<div class="kilimanjaro_part">
<h5>Latest Works</h5>
<div class="kilimanjaro_works">
<a class="kilimanjaro_works_img" href="img/gallery/1.jpg"><img src="img/gallery/1.jpg"
alt=""></a>
<a class="kilimanjaro_works_img" href="img/gallery/4.jpg"><img src="img/gallery/4.jpg"
alt=""></a>
<a class="kilimanjaro_works_img" href="img/gallery/5.jpg"><img src="img/gallery/5.jpg"
alt=""></a>
<a class="kilimanjaro_works_img" href="img/gallery/7.jpg"><img src="img/gallery/7.jpg"
alt=""></a>
<a class="kilimanjaro_works_img" href="img/gallery/10.jpg"><img src="img/gallery/10.jpg"
alt=""></a>
<a class="kilimanjaro_works_img" href="img/gallery/11.jpg"><img src="img/gallery/11.jpg"
alt=""></a>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Footer Bottom Area Start -->
<div class=" kilimanjaro_bottom_header_one section_padding_50 text-center">
<div class="container">
<div class="row">
<div class="col-12">
<p>© All Rights Reserved by <a href="#">Webublogoverflow.blogspot -(with all love)<i
class="fa fa-love"></i></a></p>
</div>
</div>
</div>
</div>
</footer>
footer.component.css
/* /*********footer*******************/
.kilimanjaro_area {
position: relative;
z-index: 1;
}
.foo_top_header_one {
background-color: #15151e;
color: #fff;
}
.section_padding_100_70 {
padding-top: 100px;
padding-bottom: 70px;
}
.foo_top_header_one {
color: #fff;
}
.kilimanjaro_part {
margin-bottom: 30px;
}
.foo_top_header_one .kilimanjaro_part>h5 {
color: #fff;
}
.kilimanjaro_part h4, .kilimanjaro_part h5 {
margin-bottom: 30px;
}
.kilimanjaro_single_contact_info>p, .kilimanjaro_single_contact_info>h5, .kilimanjaro_blog_area>a, .foo_top_header_one .kilimanjaro_part>p {
color: rgba(255, 255, 255, .5);
}
p, ul li, ol li {
font-weight: 300;
}
ul {
margin: 0;
padding: 0;
}
.kilimanjaro_bottom_header_one {
background-color: #111;
}
.section_padding_50 {
padding: 50px 0;
}
.kilimanjaro_bottom_header_one p {
color: #fff;
margin: 0;
}
p, ul li, ol li {
font-weight: 300;
}
.kilimanjaro_bottom_header_one a {
color: inherit;
font-size: 14px;
}
a, h1, h2, h3, h4, h5, h6 {
font-weight: 400;
}
.m-top-15 {
margin-top: 15px;
}
ul {
margin: 0;
padding: 0;
}
.kilimanjaro_widget>li {
display: inline-block;
}
p, ul li, ol li {
font-weight: 300;
}
ol li, ul li {
list-style: outside none none;
}
.kilimanjaro_widget a {
border: 1px solid #333;
border-radius: 6px;
color: #888;
display: inline-block;
font-size: 13px;
margin-bottom: 4px;
padding: 7px 12px;
}
ul {
margin: 0;
padding: 0;
}
.kilimanjaro_links a {
border-bottom: 1px solid #333;
color: rgba(255, 255, 255, .5);
display: block;
font-size: 13px;
margin-bottom: 5px;
padding-bottom: 10px;
}
.kilimanjaro_links a {
color: rgba(255, 255, 255, .5);
font-size: 13px;
}
.top-15 {
margin-top: 15px;
}
.foo_top_header_one .kilimanjaro_part>h5 {
color: #fff;
}
.kilimanjaro_part h4, .kilimanjaro_part h5 {
margin-bottom: 30px;
}
.kilimanjaro_social_links>li {
display: inline-block;
}
p, ul li, ol li {
font-weight: 300;
}
.kilimanjaro_social_links a {
border: 1px solid #333;
border-radius: 6px;
color: #888;
display: inline-block;
font-size: 13px;
margin-bottom: 3px;
padding: 7px 12px;
}
.kilimanjaro_blog_area .kilimanjaro_date {
color: #27ae60;
font-size: 13px;
margin-bottom: 5px;
}
.kilimanjaro_blog_area>p {
color: rgba(255, 255, 255, .5);
line-height: 1.3;
margin-bottom: 0;
}
.kilimanjaro_works>a {
display: inline-block;
position: relative;
width: 33.33333333%;
z-index: 1;
}
.kilimanjaro_thumb {
left: 0;
position: absolute;
top: 0;
width: 75px;
}
.kilimanjaro_links a i {
padding-right: 10px;
}
/* :: 18.0 Footer Area CSS */
.footer_area {
position: relative;
z-index: 1;
}
.footer_bottom p>i, .footer_bottom p>a:hover {
color: #27ae60;
}
.social_links_area {
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
padding: 50px 0 30px 0;
text-align: center;
position: relative;
z-index: 1;
}
.social_links_area>a:hover {
color: #27ae60;
}
.inline-style .social_links_area>a:hover {
background-color: transparent;
color: #27ae60;
border: 0px solid transparent;
}
.single_feature:hover .feature_text h4 {
color: #27ae60;
}
.kilimanjaro_blog_area {
border-bottom: 1px solid #333;
margin-bottom: 15px;
padding: 0 0 15px 90px;
position: relative;
z-index: 1;
}
.kilimanjaro_links a {
border-bottom: 1px solid #333;
color: rgba(255, 255, 255, .5);
display: block;
font-size: 13px;
margin-bottom: 5px;
padding-bottom: 10px;
}
[如果您希望它始终位于底部，而不是与其余内容一起滚动，则可以更改其位置property: fixed，并且可以设置top: 90vh或其他内容（我不知道如何）。这样，它将一直位于页面底部。
使用位置和底部样式
.footer{
position:fixed;
bottom: 0px;
}