sticky footer unten in eckigen

Question

Ich versuche, eine Fußzeile an der Unterseite zu platzieren.

und es ist aus irgendeinem Grund wie diese herauskommen.

In index.html, ich habe:

<main flex layout="column"> 
     <div> 
     <div ui-view="" ></div> 
     </div> 
    </main> 

    <footer> 
     <md-toolbar class="md-hue-2 md-scroll-shrink"> 
     <div layout="row" layout-align="center center" flex> 
      Powered by Webocity Technologies 
     </div> 
     </md-toolbar> 

Sticky oder nicht, das ist falsch aussieht. Was scheint hier falsch zu sein und wie behebt man das?

Answer 1

Verwenden position:fixed;bottom:0px; Fußzeile unten

footer{ 
 
position:fixed; 
 
bottom:0px; 
 
background-color:pink; 
 
width:100%; 
 
}

<main flex layout="column"> 
 
     <div> 
 
     <div ui-view="" ></div> 
 
     </div> 
 
</main> 
 

 
<footer> 
 
    <md-toolbar class="md-hue-2 md-scroll-shrink"> 
 
    <div layout="row" layout-align="center center" flex> 
 
     Powered by Webocity Technologies 
 
    </div> 
 
    </md-toolbar> 
 
</footer>

Answer 2

Es gibt viele Techniken, um anzuzeigen, dies zu erreichen. Einer meiner Favoriten ist der, der keine fixed oder absolute Positionierung benötigt (obwohl absolut gültig), aber den Inhalt auf 100% setzt. Dies funktioniert jedoch nur mit einer festen Fußhöhe.

<main flex layout="column"> 
    <div> 
    <div ui-view="" ></div> 
    </div>  
    <footer> 
    <md-toolbar class="md-hue-2 md-scroll-shrink"> 
     <div layout="row" layout-align="center center" flex> 
     Powered by Webocity Technologies 
     </div> 
    </md-toolbar> 
    </footer> 
</main> 

Und Ihre CSS:

html, body { 
    height: 100%; 
    margin: 0; 
} 
[main] { 
    min-height: 100%; 
} 
[footer] { 
    height: 150px; // for this example, can be anything 
    margin-top: -150px; // exact same value as the height 
}