web-dev-qa-db-ja.com

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>

したがって、理解のために、col-12 div内の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で作業しています。

twitter-bootstrapangularcomponentsfooterbootstrap-4
3
Carlos Pisarello

同じ問題、この方法で解決：

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;
}
0
Vaniom