Wie Fußzeile gehen nach unten machen, wenn es nicht genügend Inhalt auf Seite ist

Bootstrap Mit 3.3.7Wie Fußzeile gehen nach unten machen, wenn es nicht genügend Inhalt auf Seite ist

ich die Fußzeile wollen immer am unteren Rand des Browserfensters ausgerichtet werden.

Ich mache nicht möchte den "sticky footer" verwenden, weil ich nicht möchte, dass es irgendwelche meiner Inhalte überlagert.

Wenn die Seite genug Inhalt hat, sieht es gut aus, aber wenn es nicht erscheint, erscheint es zufällig auf dem Bildschirm.

Beispiel Markup:

<body> 
    <div class="container"> 
     <div class="row"> 
     <h1>My page</h1> 
     <p>Page content here</p> 
     </div> 
    </div> 

    <footer> 
     <div class="container"> 
      <div class="row"><p>Footer content here</p></div> 
     </div> 
    </footer> 
</body>

Wenn es viel Inhalt in den Körper der Seite ist es in Ordnung ist. Aber für kurze Seiten ist es nicht.

Ich verwende die Standard-Navigationsleiste auf das Standardhöhe ist

<nav class="navbar navbar-static-top navbar-inverse"> 

</nav>

ich für Lösungen auf ausgesehen haben, aber keiner scheint zu funktionieren. Ich kann nicht verstehen, warum Bootstrap das für eine so einfache Aufgabe so komplex gemacht hat. Nicht jeder will eine klebrige Fußzeile!

Quelle

2016-09-30 Audrey Roberts

check this out zu ändern http://stackoverflow.com/questions/17966140/twitter -bootstrap-3-sticky-footer –

@MoneerKamal das ist für den Sticky Footer, was ich nicht verwenden möchte. –

@AudreyRoberts Was ist los mit Sticky Footer? [Bootstraps-Beispiel] (http://getbootstrap.com/examples/sticky-footer/) – Vucko

Wenn Sie IE < 10 nicht interessieren, können Sie Flex verwenden. Es ist wirklich einfach, aber wie gesagt, es ist nur für "moderne" Browser.

HTML:

<body> 
    <main> 
     <!-- main content goes here --> 
    </main> 
    <footer> 

    </footer> 
</body>

CSS:

body { 
    display: flex; 
    flex-direction: column; 
    min-height: 100vh; 
} 

main { 
    flex: 1; 
}

Quelle

2016-09-30 15:13:04

@ErikPhilips Ich akzeptiere es als die Antwort, weil es funktioniert, und löst mein Problem. Wenn Sie eine Lösung haben, die in allen Browsern funktioniert und die Logik der Funktionsweise erklärt, ändere ich die akzeptierte Antwort. Wenn nicht, funktioniert das einfach und ist gut für meine Bedürfnisse. –

In meinem Kommentar ging es nicht darum, ob es funktionierte oder nicht, es ging um die Tatsache, dass SO die * Link-Only-Responses * missbilligt, denn wenn die Verbindung abbricht, tut das auch diese Antwort. Er hat die Antwort mit dem Beispiel aktualisiert, was bedeutet, dass zukünftige Benutzer nicht über einen Link arbeiten müssen, der stirbt oder nicht. –

Sie können es tun, wenn Sie Körperhöhe als 100% machen und entfernt die Fußzeilenhöhe

html, body { 
     height: 100%; 
    } 

.content { 
     height: calc(100vh - 150px); 
     height: -o-calc(100vh - 150px); /* opera */ 
     height: -webkit-calc(100vh - 150px); /* google, safari */ 
     height: -moz-calc(100vh - 150px); /* firefox */ 
    } 

.content { 
    background-color:red; 
    width: 100%; 
    min-height: 500px; 

} 

.footer{ 
    background-color:green; 
    height:150px; 
}

Scheck meinen Code aus auf jsfiddle

versuchen

> min-height: 500px;

> min-height: 200px;

> ".content"

um zu sehen, den Unterschied

Quelle

2016-09-30 15:40:31

Wie Fußzeile gehen nach unten machen, wenn es nicht genügend Inhalt auf Seite ist

Antwort

Verwandte Themen