Sets Fußzeile auf der Unterseite (zum Inhalt angepasst) mit kantigen 4 und Bootstrap 4

¿Wie kann ich einen Fußzeile Aufenthalt auf der Unterseite einer Website mit der folgenden Struktur ?: macheSets Fußzeile auf der Unterseite (zum Inhalt angepasst) mit kantigen 4 und Bootstrap 4

<html> 
    <head> 
    </head> 

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

</html>

Also, der app-root die Hauptkomponente in Winkel ist, i innerhalb dieser Komponente die folgende Struktur haben:

<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>

Also, nur für das Verständnis sind die divs innerhalb des col-12 div in Abhängigkeit von einem Titel setted durch Drücken der Tasten genannt Variable gezeigt auf der Navigationsleiste. Der Fall ist, dass nicht alle dieser divs Inhalte haben, die die Bildschirmgröße überschreiten, und die Fußzeile nach oben geht.

Inside my Fußzeile Ich habe diese Struktur:

<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>

, was ich brauche, ist, dass die Fußzeile am unteren Rand des Bildschirms, wenn der Inhalt zwischen dem bleiben und ist zu kurz, um den Bildschirm zu füllen.

Wenn es eine Lösung mit CSS, ich arbeite mit Twitter Bootstrap 4, wenn es eine Lösung mit Typoskript ist, arbeite ich mit kantigem 4.

Quelle

2017-11-13 Carlos Pisarello

Sie können eine sticky footer gelten wie auf der v4 Twitter beschrieben Beispiel (https://v4-alpha.getbootstrap.com/examples/sticky-footer/).

Hier ist ein kurzes Beispiel:

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

Quelle

2017-11-13 22:03:00 pixelbits

position: absolut ist keine beste lösung weil du dich um das parent html element mit position kümmern solltest: reletive. Ich meine, es gibt eine Chance, ein paar Bugs zu bekommen. –

Guter Punkt, habe ich CSS-Stil für HTML hinzugefügt und einen Link zu sticky-footer.css als Referenz hinzugefügt. – pixelbits

viele Möglichkeiten gibt es Fußzeile auf der Unterseite zu setzen. Dies ist einer von ihnen:

<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 eine Höhe der Fußzeile in meinem Fall ist.

Quelle

2017-11-13 22:04:54

Wenn ich richtig zu verstehen, kann dies in der Regel mit CSS erreicht werden, die traditionell:

html,body{ 
    height: 100% 
}

Für Ihr Beispiel könnten Sie versuchen:

.container { height: 100%;}

Oder sogar versuchen, Ihre app- bewegen navbar und app-footer in index.html anstelle von app.component.html

Quelle

2017-11-13 22:07:13

Sets Fußzeile auf der Unterseite (zum Inhalt angepasst) mit kantigen 4 und Bootstrap 4

Antwort

Verwandte Themen