Нижний колонтитул не в нижней части angular

Question

Я сделал новый компонент для нижнего колонтитула. Я использовал шаблон, приведенный ниже, но нижний колонтитул не в нижней части, где он должен. Я применил компонент нижнего колонтитула, используя сервис, просто чтобы сделать его видимым или нет на определенном маршруте, таком как login et c ..

Я пробовал применять много решений, но безуспешно, может кто-нибудь помочь в этом ?

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>support@webblogoverflow.com <br> luckmoshy@gmail.com</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;
} 

Answer 1

Давайте сделаем небольшую структурную модификацию, добавим нижний колонтитул внутри разделителя.

<app-navbar></app-navbar> // set css position fixed
//place holder here and put padding at top and at the bottom
<div class="placeholder">
    <div class="inner-placeholder">
        <app-breakingnews></app-breakingnews>
        <router-outlet></router-outlet>
    </div>
    <app-footer></app-footer>
</div>
<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>

css:

.placeholder{
  display: flex;
  flex-flow: column;
  height: calc( 100vh - 60px); //viewport height - app-navbar height
}
.inner-placeholder{
  flex: 1;// if you want center container large space else will take size of the content or apply flex-basis
}
app-footer{
 flex: auto; // up to you
}
app-navbar{
  position:fixed;
  top: 0px;
  height: 60px;
}

Answer 2

Я думаю, вы хотите, чтобы нижний колонтитул оставался закрытым с коротким контентом, в то время как нижний колонтитул выталкивался из контента с длинным контентом. Вы можете сделать это с помощью этих css правил:

body {
    position: relative;
    min-height: 100%;
    padding: 0 0 100px;
}
footer {
    position: absolute;
    bottom: 0;
    height: 100px;
}

Answer 3

Чтобы зафиксировать любой элемент в определенной позиции, используйте свойство css position: fixed и укажите значение top|bottom.

* {
  margin: 0
}

.app {
  margin: 0 auto;
  position: relative;
  font-family: arial, sans-serif;
}

nav {
  position: fixed;
  left: 0;
  top: 0;
  height: 60px;
  background-color: blue;
  width: 100%;
}

footer {
  position: fixed;
  bottom: 0;
  left: 0;
  height: 60px;
  background: #000;
  width: 100%;
}

main {
  height: calc(100% - 120px);
  /* height of nav and footer is excluded from 100% */
  overflow: auto;
  margin: 65px 0 60px 0;
}

main p {
  margin-bottom: 20px;
}

<div class="app">
  <nav></nav>
  <main>
    <p>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
      survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
      publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </p>

    <p>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
      survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
      publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </p>

    <p>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
      survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
      publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </p>
  </main>
  <footer>
  </footer>
  </app>

Answer 4

используйте позицию и нижний стиль

.footer .kilimanjaro_area{

position:fixed;
bottom: 0px;
z-index: 2000;
}

Answer 5

Если вы хотите, чтобы он всегда находился внизу и не прокручивал его вместе с остальным содержимым, вы можете изменить его позицию property: fixed и установить top: 90vh или что-то еще (я не знаю по сердце). Таким образом, он будет постоянно внизу страницы.