Установите нижний колонтитул внизу (адаптированный к содержимому) с помощью 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 отображаются в зависимости от переменной 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, если есть решение с машинописным текстом, я работаю с 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