Fußzeile stecken auf der Mitte der Seite

Question

Ich arbeite an einem angularjs + Knoten js-Anwendung. Ich rufe meine Ansichten in meinem index.html wie folgt:

<div ng-include="'views/header/header.view.html'"></div> 
<div ng-view style="height: 100%"></div> 
<div ng-include="'views/footer/footer.view.html'"></div> 

Ich habe style="height: 100%", weil ohne sie meine ng-Ansicht Zugabe wurde nicht auf den ganzen Bildschirm erstreckt. Aber jetzt schneidet meine Fußzeile meine Seite. Es ist wahrscheinlich, weil rechts nach height: 100% d. H. Der Rand des Fensters.

Wie kann ich das beheben?

Answer 1

Verwenden position für footer:

<div ng-include="'views/footer/footer.view.html'" 
    style="position: fixed; bottom: 0; left: 0; right: 0;"></div> 

auch sicherstellen, dass Sie einen Boden padding zu body für die Höhe der Fußzeile geben, so dass der Inhalt hinter der Fußzeile überlappt wird nicht.

Answer 2

<div ng-include='"templates/header.html"'></div> 
    <div ng-view></div> 
    <div ng-include='"templates/footer.html"' class="footer--section"></div> 

.footer--section { 
    margin: 0 ; 
    width: 100%; 
} 
.footer address { 
    float: right; 
    font-size: 13px; 
    font-weight: 400; 
    color: rgb(255, 255, 255); 
    line-height: 18px; 
    margin: 0; 
    padding: 0; 
} 

<div class="footer"> 
    <div class="container"> 
     <div class="row"> 
      <div class="col-md-6 col-sm-offset-6"> 
       <address> 
        your addresss... or footer 
       </address> 
      </div> 
     </div> 
    </div> 
</div> 

Ich hoffe, es hilft :)

Answer 3

Von https://teamtreehouse.com/community/when-is-inline-css-a-good-idea:

Es als gute Praxis ist Ihre CSS und Ihre HTML getrennt zu halten. Durch das Hinzufügen von Inline-Stilen wird es schwieriger, das Aussehen einer Site zu überarbeiten, es macht es für zukünftige Programmierer schwieriger, Ihre Site zu ändern, und insgesamt ist das NICHT der beste Weg. Wenn alles in einer CSS-Datei gespeichert ist, können Sie das gesamte Design Ihrer Site ändern, ohne sich mit den Daten (HTML) der Site herumschlagen zu müssen. Also mein Rat verwendet keine Inline-Stile.

<div class='sticky-footer' ng-include="'views/footer/footer.view.html'"></div> 

in Ihrem CSS-Datei, fügen Sie einfach diese Klasse

.sticky-footer { 
     position: fixed; 
     bottom: 0; 
     left: 0; 
     right: 0; 
     height: whatever you want px; 
    }