Задайте долен колонтитул отдолу (адаптиран към съдържанието) с Angular 4 и Bootstrap 4

¿Как мога да накарам долен колонтитул да остане в долната част на уебсайт със следната структура?:

<html>
    <head>
    </head>

    <body>
        <app-root></app-root>
    </body>

</html>

И така, app-root е основният компонент в angular, вътре в този компонент имам следната структура:

<app-navbar></app-navbar>
<div class="container">
    <div class="row">

        <div class="col-12 p-0">
            <app-information *ngIf="title == 'information'"></app-information>
            <app-form *ngIf="title == 'form'"></app-form> 
            <app-proyects *ngIf="title == 'proyects'"></app-proyects>
            <app-blog *ngIf="title == 'blog'"></app-blog>
            <app-courses *ngIf="title == 'coursess'"></cursos>
        </div>

    </div>
</div>
<app-footer></app-footer>

И така, само за разбиране, div в col-12 div се показват в зависимост от променлива, наречена title, настроена чрез натискане на бутони в навигационната лента. Случаят е, че не всички от тези div имат съдържание, което надвишава размера на екрана, а долният колонтитул отива нагоре.

В долния колонтитул имам следната структура:

<footer class="bg-inf-blue" >
    <div class="container p-0">
        <div class="row text-white py-3">
            <div class="col-6 h6 p-0">Contact</div>
            <div class="col-6 h6">Social Media</div>
            <div class="col-2 p-0">
                <ul class="list-unstyled">
                    <li class="h6">Place 1</li>
                    <li>Place 1 address</li>
                    <li>XXX XXX-XXXX</li>
                </ul>
            </div>
            <div class="col-2">
                <ul class="list-unstyled">
                    <li class="h6">Place 2</li>
                    <li>Place 2 address</li>
                    <li>XXX XXX-XXXX</li>
                </ul>
            </div>
            <div class="col-2">
                <ul class="list-unstyled">
                    <li class="h6">Place 3</li>
                    <li>Place 3 address</li>
                    <li>XXX XXX-XXXX</li>
                </ul>
            </div>
            <div class="col-6 align-items-center">
                <a href="https://www.facebook.com/address/" target="blank"><img src="../assets/facebook-logo-button.png" height="40px"></a>
                <a href="https://twitter.com/address" target="blank"><img src="../assets/twitter-logo-button.png" height="40px"></a>
            </div>
            <div class="col-12 p-0">
                <small>Lorem ipsum dolor sit amet consectetur</small>
            </div>
        </div>
    </div>
</footer>

това, от което се нуждая, е долният колонтитул да остане в долната част на екрана, когато съдържанието между и е твърде кратко, за да запълни екрана.

Ако има решение с CSS, работя с Twitter Bootstrap 4, ако има решение с typescript, работя с Angular 4.


angular components twitter-bootstrap bootstrap-4 footer
person Carlos Pisarello    schedule 13.11.2017    source източник

Отговори (4)


arrow_upward
9
arrow_downward

Можете да приложите залепващ долен колонтитул, както е описано в Twitter v4 пример (https://v4-alpha.getbootstrap.com/examples/sticky-footer/).

Ето кратък пример:

HTML

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

CSS

html {
    position: relative;
    min-height: 100%;
}

body {
  /* Margin bottom by footer height */
  margin-bottom: 60px;
}

.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  /* Set the fixed height of the footer here */
  height: 60px;
  line-height: 60px;
}
person pixelbits    schedule 13.11.2017
comment
position: absolute не е най-доброто решение, защото трябва да се интересувате от родителския html елемент с position: reletive. Искам да кажа, че има шанс да получите някои грешки. - person Dmitry Grinko; 14.11.2017
comment
Добра точка, добавих css стил за HTML и добавих връзка към sticky-footer.css за справка. - person pixelbits; 14.11.2017

arrow_upward
0
arrow_downward

Има много начини да зададете долен колонтитул отдолу. Това е един от тях:

<div class="wrapper container">

    ... // your html code here

    <div class="push"></div>

</div>
<app-footer></app-footer>

<style>

.wrapper{
    min-height: 100%;
    margin-bottom: -170px;
}

* html .wrapper{
    height: 100%;
}

.push{
    height: 170px;
}

</style>

170px е височината на долния колонтитул в моя случай.

person Dmitry Grinko    schedule 13.11.2017

arrow_upward
0
arrow_downward

Ако разбирам правилно, това обикновено може да се постигне с css, традиционно:

html,body{
    height: 100%
}

За вашия пример можете да опитате:

.container { height: 100%;}

Или дори опитайте да преместите навигационната лента на приложението и долния колонтитул на приложението в index.html вместо в app.component.html

person Brian Wright    schedule 13.11.2017

arrow_upward
0
arrow_downward

Същият проблем, разрешен с този метод:

html {
    position: relative;
    min-height: 100%;
}

body {
    /* 115px is the height of my footer */
    padding-bottom: 115px;
}

.footer{  
    position: absolute;
    bottom: 0;
    width: 100%;
    padding-top: 20px;
    padding-bottom: 10px;
}
person Vaniom    schedule 07.03.2019