Bootstrap Fußzeile am Ende der Seite

Ich habe viele Beiträge darüber gelesen, aber ich habe immer noch keine Antwort gefunden. Ich habe eine Fußzeile, die ich am Ende der Seite sein möchte, nicht behoben. Das Problem ist, dass die Fußzeile wo der Inhalt endet. Schaue auf das Bild. Bootstrap Fußzeile am Ende der Seite

Das ist mein HTML:

<!DOCTYPE html> 
<html> 
    <head> 
     <meta charset="utf-8"/> 
     <title> Mobtech - Privatni korisnici </title> 

     <!--Ubaci bootstrap css --> 
     <link rel="stylesheet" href="css/bootstrap.min.css"> 
     <link rel="stylesheet" href="css/style.css"> 
     <link rel="css/basic-template.css" rel="stylesheet"> 
     <link href="https://fonts.googleapis.com/css?family=Roboto+Condensed" rel="stylesheet"> 

    </head> 
    <body> 
     <!--Navigation bar --> 
     <nav class="navbar navbar-default" role="navigation"> 
      <div class="container"> 
       <div class="navbar-header"> 
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-container"> 
         <span class="sr-only"> Pokazi i sakrij navigaciju </span> 
         <span class="icon-bar"></span> 
         <span class="icon-bar"></span> 
         <span class="icon-bar"></span> 
        </button> 
        <a class="navbar-brand" href="#"> 
         <span> <img src="Slike/logo.png" alt="LogoSlika"/> </span> 
         <font face="Roboto Condensed" size="4" color="green"> Mobtech </font> 
        </a> 
       </div> 
       <div class="collapse navbar-collapse" id="navbar-container"> 
        <ul class="nav navbar-nav navbar-right"> 
         <li><a href="index.html"> Početna strana </a> </li> 
         <li class="active"><a href="#"> Privatni korisnici </a> </li> 
         <li><a href="poslovni.html"> Poslovni korisnici </a> </li> 
         <li><a href="uredjaji.html"> Uređaji </a> </li> 
         <li><a href="onama.html"> O Nama </a> </li> 
        </ul> 
       </div> 
      </div> 
     </nav> 

     <br /> 
      <div class="container"> <!--Container --> 

       <div class="row"> 
        <!-- Kolona na velikom ekranu (lg) prikazuje duzinu jedne kolone, Ekstra small (xs) prikazuje 4 kolone --> 
        <div class="col-lg-12 bg-success"> 
         <p> Outer div </p> 
         <div class="col-lg-6 bg-primary"> 
          <p> Inner div </p> 
         </div> 
        </div> 
       </div> 
      </div> 

      <!-- Footer --> 
      <footer class="mojFooter"> 
       <font face="Roboto Condensed" size="4"> <center> 
       <div class="container"> 
        <div class="row" style="margin-top: 7px;"> 
         <p> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &copy; Copyright Ivan Prošić 2016.</p> 
        </div> 
        <div class="bottom-footer"> 
         <div class="col-md-12"> 
          <ul class="footer-nav"> 
           <li> <a href="https://www.facebook.com/"> Facebook </a> </li> 
           <li> <a href="https://twitter.com/"> Twitter </a> </li> 
           <li> <a href="https://plus.google.com/"> Google+ </a> </li> 
          </ul> 
         </div> 
        </div> 
       </div> 
       </font> </center> 
      </footer> 



      <!-- JavaScript fajl --> 
      <script src="js/jquery.min.js"></script> 
      <!-- Kompresovan JavaScript fajl --> 
      <script src="js/bootstrap.min.js"></script> 
    </body> 
</html>

Das ist mein CSS ist, für die Fußzeile nur:

.mojFooter{ 
    background-color: #f8f8f8; 
    color: #00a651; 
    padding-top: 0px; 
    border-top: 1px solid #e7e7e7; 
    margin-bottom: 0px; 
} 

.bottom-footer{ 
    border-top: 1px solid #00a651; 
    margin-top: 0px; 
    padding-top: 7px; 
    color: #00a651; 

} 

.footer-nav li{ 
    display: inline; 
    padding: 0px 40px; 
} 

.footer-nav a{ 
    color: grey; 
    text-decoration: none; 
}

Quelle

2016-11-28 Ivan

so in anderen Worten möchten Sie, dass die Fußzeile am Ende der Seite steht, nicht fixiert, AUSSER wenn der Inhalt kürzer als das Browserfenster ist, soll er am unteren Rand der Seite fixiert werden? – andi

Sie haben meine Antwort hier http://StackOverflow.com/A/24916228/1804107 – Aleksandar

ich nicht erlaubt bin noch zu kommentieren, dies wird so hoffentlich beantworten Ihre Frage. Ich bin ein wenig unklar, was Sie mit „Ende der Seite, nicht festgelegt“ meine, natürlich bedeuten Sie nicht am Ende des Inhalts ....

Wie auch immer, wenn Sie für eine gesuchte Fußzeile, die immer unten sein wird, aber kein klebriges Fußzeile hier einen Blick: Stackoverflow Flushing Footer

Wenn Sie sich für einen klebrigen Typ Fußzeile versuchen Stackoverflow Sticky Footer

Beachten Sie die Links oben sind andere Version von Bootstrap suchen, aber Look sollte nicht viel Optimieren, wenn sie nicht funktionieren in welcher Version Sie verwenden.

Quelle

2016-11-28 21:51:33 dpp

Die einfachste und browserübergreifende Lösung für Ihr Problem besteht darin, eine minimale Höhe für body Objekt festzulegen. Und dann setzen Sie absolute Position für Ihre Fußzeile mit bottom: 0 Regel.

body { 
    min-height: 100vh; 
    position: relative; 
    margin: 0; 
} 

footer { 
    position: absolute; 
    bottom: 0; 
}

Bitte überprüfen Sie folgendes Beispiel: FIDDLE

Quelle

2016-11-28 21:56:16 luke

Dies funktioniert nur, wenn Sie nicht scollen müssen. – smoes

Sie haben Recht - Ich habe relative Position auf Körper und Min-Höhe vermisst sollte 100vh anstelle von 100% sein ... – luke

Vielen Dank! Es hilft mir. –

Sie können nur hinzufügen style = "min-height: 100vh" auf Ihrer Seite Inhalt conteiner und platzieren Fußzeile in einem anderen conteiner

Quelle

2018-02-14 23:18:12

Bootstrap Fußzeile am Ende der Seite

Antwort

Verwandte Themen