設定フッターとブートストラップ4

¿どのように私は次のような構造を持つウェブサイトの下部にフッターのご滞在を作ることができる？：設定フッターとブートストラップ4

<html> 
    <head> 
    </head> 

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

</html>

ので、アプリルートCOL-12のdivがタイトルは、ボタンを押すことで、最大settedと呼ばれる変数に応じて、表示され内側のdiv、ちょうど理解するために、そう

<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のすべてが画面サイズを超えるコンテンツを持っているわけではなく、フッターが上に行くことがあります。私のフッター内

私はこのような構造を持っている：

<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のブートストラップ4で働いているtypescriptですと解決策があるのならば、私は角4

出典

2017-11-13 Carlos Pisarello

で働いているTwitterのV4に説明するようにsticky footerを適用することができます例（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; 
}

出典

2017-11-13 22:03:00 pixelbits

position：絶対位置は親HTML要素の位置を注意する必要があります。私はいくつかのバグを取得する機会があることを意味します。 –

良い点は、HTMLのCSSスタイルを追加し、参照用にsticky-footer.cssへのリンクを追加しました。 – pixelbits

下部にフッターを設定する方法はたくさんあります。これはそのうちの一つである：

<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は、私の場合は、フッターの高さです。私が正しく理解していた場合、これは通常、伝統的に、CSSを用いて達成することができる

出典

2017-11-13 22:04:54

：あなたたとえば

html,body{ 
    height: 100% 
}

を、あなたが試みることができる：

.container { height: 100%;}

あるいはあなたのAPP-を移動してみてくださいをnavbarとapp-footerをapp.component.htmlの代わりにindex.htmlに置き換えます。

出典

2017-11-13 22:07:13

設定フッターとブートストラップ4

答えて

関連する問題