So erstellen Sie eine klebrige Fußzeile, die mit Bootstrap 3 gut funktioniert

76

Mit oder ohne Top-Navi ist es sehr häufig, dass Websites eine klebrige Fußzeile haben. Bootstrap verfügt über eine Funktion zum einfachen Erstellen fester Fußzeilen, aber keine solche Funktion zum Erstellen klebriger Fußzeilen - es gibt einen großen Unterschied.

Wenn Sie diese Frage googeln, werden Sie feststellen, dass Hunderte, wenn nicht Tausende von Entwicklern dieselbe Frage haben, aber keine gute Antwort haben.

Ironischerweise hat die Bootstrap-Dokumentationsseite selbst neben dem Bootstrap-Styling und einer festen oberen Navigationsleiste eine klebrige Fußzeile. Es ist jedoch alles benutzerdefiniertes CSS und nicht Teil des Frameworks. Ein naheliegender Weg ist es also, das benutzerdefinierte Design zu übernehmen und umzugestalten, da es offensichtlich gut im Bootstrap-Framework funktioniert, aber das scheint schmerzhafter zu sein, als es sein sollte.

In diesem Beispiel finden Sie eine Beispielseite mit einer oberen Bootstrap-Navigationsleiste und einer unerwünschten, nicht klebrigen Fußzeile.

Problem:

(Danke Softlayer - für die Grafik )

Eine nicht klebrige Fußzeile ist ziemlich hässlich

Gewünschte Lösung:

Eine klebrige Fußzeile befindet sich immer unten

Natürlich sollte die Fußzeile auch reaktionsschnell und browserübergreifend sein ...

css twitter-bootstrap twitter-bootstrap-3 sticky-footer Robert Christian
quelle
2
Haben Sie tatsächlich versucht, die Dokumentation oder die Beispielvorlage zu verwenden ? Wenn ja, geben Sie Ihren Code ein ...
Schmalzy
@Sonnellzy - Danke, das hat geholfen. Ich habe aus dem Beispiel, auf das Sie oben verlinkt haben, ein plnkr erstellt. plnkr.co/edit/4OH2ZL?p=preview
Robert Christian

Antworten:

77

Die Antwort finden Sie, wie Schmalzy betont, hier im Beispielabschnitt der getbootstrap-Site.

Dieses Beispiel enthält jedoch kein Top-Navi. Informationen zur Navigation mit festem Verdeck und klebriger Fußzeile finden Sie in diesem Abschnitt oder im folgenden Code.

Stil CSS:

/* Styles go here */

/* Sticky footer styles
-------------------------------------------------- */

html,
body {
  height: 100%;
  /* The html and body elements cannot have any padding or margin. */
}

/* Wrapper for page content to push down footer */
#wrap {
  min-height: 100%;
  height: auto;
  /* Negative indent footer by its height */
  margin: 0 auto -60px;
  /* Pad bottom by footer height */
  padding: 0 0 60px;
}

/* Set the fixed height of the footer here */
#footer {
  height: 60px;
  background-color: #f5f5f5;
}


/* Custom page CSS
-------------------------------------------------- */
/* Not required for template or sticky footer method. */

.container {
  width: auto;
  max-width: 680px;
  padding: 0 15px;
}
.container .credit {
  margin: 20px 0;
}

Index.html:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="shortcut icon" href="../../docs-assets/ico/favicon.png">

    <title>Sticky Footer Template for Bootstrap</title>

    <!-- Bootstrap core CSS -->
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.0.1/css/bootstrap.min.css" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="style.css" rel="stylesheet">

    <!-- Just for debugging purposes. Don't actually copy this line! -->
    <!--[if lt IE 9]><script src="../../docs-assets/js/ie8-responsive-file-warning.js"></script><![endif]-->

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->
  </head>

  <body>

    <!-- Wrap all page content here -->
    <div id="wrap">

<nav class="navbar navbar-default" role="navigation">
  <!-- Brand and toggle get grouped for better mobile display -->
  <div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
      <span class="sr-only">Toggle navigation</span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
    <a class="navbar-brand" href="#">Brand</a>
  </div>

  <!-- Collect the nav links, forms, and other content for toggling -->
  <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Link</a></li>
      <li><a href="#">Link</a></li>
      <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
        <ul class="dropdown-menu">
          <li><a href="#">Action</a></li>
          <li><a href="#">Another action</a></li>
          <li><a href="#">Something else here</a></li>
          <li class="divider"></li>
          <li><a href="#">Separated link</a></li>
          <li class="divider"></li>
          <li><a href="#">One more separated link</a></li>
        </ul>
      </li>
    </ul>
    <form class="navbar-form navbar-left" role="search">
      <div class="form-group">
        <input type="text" class="form-control" placeholder="Search">
      </div>
      <button type="submit" class="btn btn-default">Submit</button>
    </form>
    <ul class="nav navbar-nav navbar-right">
      <li><a href="#">Link</a></li>
      <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
        <ul class="dropdown-menu">
          <li><a href="#">Action</a></li>
          <li><a href="#">Another action</a></li>
          <li><a href="#">Something else here</a></li>
          <li class="divider"></li>
          <li><a href="#">Separated link</a></li>
        </ul>
      </li>
    </ul>
  </div><!-- /.navbar-collapse -->
</nav>

      <!-- Begin page content -->
      <div class="container">

        <div class="page-header">
          <h1>Sticky footer</h1>
        </div>
        <p class="lead">Pin a fixed-height footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS.</p>
        <p>Use <a href="../sticky-footer-navbar">the sticky footer with a fixed navbar</a> if need be, too.</p>
      </div>
    </div><!-- Wrap Div end -->

    <div id="footer">
      <div class="container">
        <p class="text-muted credit">Example courtesy <a href="http://martinbean.co.uk">Martin Bean</a> and <a href="http://ryanfait.com/sticky-footer/">Ryan Fait</a>.</p>
      </div>
    </div>


    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
  </body>
</html>
Robert Christian
quelle
Hat jemand das Problem, wo dies funktioniert, aber nur, wenn Sie auf der Seite nach unten scrollen ? Recht seltsam.
Brad
1
Diese Fußzeile reagiert nicht ! Eine vollständige Antwort finden Sie unter answer stackoverflow.com/a/23833625/1647737 .
le_m
1
Wenn Sie Flexbox verwenden können, empfehlen wir Ihnen, diesen Link zu versuchen: philipwalton.github.io/solved-by-flexbox/demos/sticky-footer
robodo
24

Sticky-Footer-Lösungen, die auf Fußzeilen mit fester Höhe basieren, sind bei reaktionsschnellen Ansätzen (bei denen sich die Höhe der Fußzeile häufig an verschiedenen Haltepunkten ändert) nicht mehr beliebt. Die einfachste reaktionsschnelle Lösung für klebrige Fußzeilen, die ich gesehen habe, besteht in der Verwendung display: tablein einem Container der obersten Ebene, z.

http://galengidman.com/2014/03/25/responsive-flexible-height-sticky-footers-in-css/

http://timothy-long.com/responsive-sticky-footer/

http://www.visualdecree.co.uk/posts/2013/12/17/responsive-sticky-footers/

Chris Peckham
quelle
Anzeige: Tabelle ist der Weg zu gehen
Luther
19

Der beste Weg ist, Folgendes zu tun:
HTML: Sticky Footer
CSS: CSS für Sticky Footer
HTML-Codebeispiel:

<div class="container">
  <div class="page-header">
    <h1>Sticky footer</h1>
  </div>
  <p class="lead">Pin a fixed-height footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS.</p>
  <p>Use <a href="../sticky-footer-navbar">the sticky footer with a fixed navbar</a> if need be, too.</p>
</div>

<footer class="footer">
  <div class="container">
    <p class="text-muted">Place sticky footer content here.</p>
  </div>
</footer>

CSS-Codebeispiel:

    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;
  background-color: #f5f5f5;
}

Eine weitere kleine Änderung macht es möglicherweise perfekter (abhängig von Ihrem Projekt), sodass die Fußzeile in mobilen Ansichten nicht beeinträchtigt wird.

@media (max-width:768px){ .footer{position:absolute;width:100%;} }
@media (min-width:768px){ .footer{position:absolute;bottom:0;height:60px;width:100%;}}
abmmhasan
quelle
4
Ersetzen Sie position: relativedurch position: fixed, um es beim Scrollen nach unten unten zu halten
Max
14

Ich habe nach einem einfachen Weg gesucht, um die klebrige Fußzeile zum Laufen zu bringen. Ich habe gerade ein class="navbar-fixed-bottom" angewendet und es hat sofort funktioniert. Das Einzige, was Sie beachten müssen, ist, die Einstellungen der Fußzeile für mobile Geräte anzupassen. Prost!

Panchope
quelle
6

Für diejenigen , die für eine leichte Antwort suchen, können Sie ein einfaches Arbeitsbeispiel erhalten von hier :

html {
    position: relative;
    min-height: 100%;
}
body {
    margin-bottom: 60px /* Height of the footer */
}
footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 60px /* Example value */
}

Spielen Sie einfach mit den body's, margin-bottomum Platz zwischen Inhalt und Fußzeile zu schaffen.

Eshanel
quelle
2

Ich werde näher auf das eingehen, was Robodo in einem der obigen Kommentare gesagt hat, einen wirklich schnellen und gut aussehenden und wichtigeren, reaktionsschnellen Ansatz (keine feste Höhe), der keine Hacks beinhaltet, ist die Verwendung der Flexbox. Wenn Sie nicht durch die Unterstützung von Browsern eingeschränkt sind, ist dies eine großartige Lösung.

HTML

<body>
  <div class="site-content">
    Site content
  </div>
  <footer class="footer">
    Footer content
  </footer>
</body>

CSS

html {
  height: 100%;
}
body {
  min-height: 100%;
  display: flex;
  flex-direction: column;
}
.site-content {
  flex: 1;
}

Die Browserunterstützung kann hier überprüft werden: http://caniuse.com/#feat=flexbox

Häufigere Problemlösungen mit Flexbox: https://github.com/philipwalton/solved-by-flexbox

adanski
quelle
1

Ich bin mir nicht sicher, was Sie bisher versucht haben, aber es ist ziemlich einfach. Tun Sie dies einfach: http://plnkr.co/edit/kmEWh7?p=preview

html, body {
  height: 100%;
}

footer {
  position: absolute;
  bottom: 0;
}
Charles Ingalls
quelle
Danke, das funktioniert, deckt aber nicht alle Fälle ab. Verkleinern Sie beispielsweise Ihr Ansichtsfenster vertikal und achten Sie darauf, dass sich die Fußzeile zwischen den Absatztexten bewegt.
Robert Christian
Sicher tut es das! Sie möchten eine klebrige Fußzeile, damit sie unten klebrig bleibt. Wenn Sie das Ansichtsfenster verkleinern, wird der Text überlagert. Aus diesem Grund müssen Sie das div, das Ihren Inhalt enthält, auf Überlauf setzen: auto; und geben Sie ihm eine Bodenpolsterung, die mindestens der Höhe Ihrer Fußzeile entspricht.
Charles Ingalls
@ CharlesIngalls So eine falsche Antwort. Die Frage betraf die klebrige Fußzeile und diese Antwort kommt ihr nicht nahe.
WeAreRight
1

Da es sich um Bootstrap 3 handelt, verwendet die Site jQuery. Die Lösung könnte also auch die folgende sein, anstatt zu versuchen, mit komplexem CSS zu spielen:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link href="css/bootstrap.min.css" rel="stylesheet" />
    <style>
        .my-footer {
            border-radius : 0px;
            margin : 0px; /* pesky margin below .navbar */
            position : absolute;
            width : 100%;
        }
    </style>
</head>
<body>
    <div class="container-fluid">
        <div class="row">
            <!-- Content of any length -->
            asdfasdfasdfasdfs <br />
            asdfasdfasdfasdfs <br />
            asdfasdfasdfasdfs <br />
        </div>
    </div>

    <div class="navbar navbar-inverse my-footer">
        <div class="container-fluid">
            <div class="row">
                <p class="navbar-text">My footer content goes here...</p>
            </div>
        </div>
    </div>

    <script src="js/jquery-1.11.0.min.js"></script>
    <script src="js/bootstrap.min.js"></script>

    <script type="text/javascript">
        $(document).ready(function () {
            var $docH = $(document).height();
            // The document height will grow as the content on the page grows.
            $('.my-footer').css({
                /*
                The default height of .navbar is 50px with a 1px border,
                change this 52 if you change the height of your footer.
                */
                top: ($docH - 52) + 'px'
            });
        });
    </script>
</body>
</html>

Eine andere Sichtweise, hoffe es hilft.

Mit freundlichen Grüßen.

MichaelJTaylor
quelle
1

leicht einzustellen 

position:absolute;
bottom:0;
width:100%;

zu Ihrer .footer

TU es einfach

Amir Emad Mahmodpor
quelle
1

Falls Ihr HTML die (grobe) Struktur hat:

<div class="wrapper">
   <div>....</div>
   ...
   <div>....</div>
</div>
<div class="footer">
   ...
</div>

Dann ist das einfachste CSS, das die Fußzeile am unteren Bildschirmrand fixiert, das 

html, body {
    height: 100%;
}
.wrapper {
  min-height: calc(100vh - 80px);
}
.footer {
   height: 80px;
}

... wo die Höhe der Fußzeile 80px beträgt. calcberechnet die Höhe des Wrappers so, dass sie der Höhe des Fensters abzüglich der Höhe der Fußzeile (80px) entspricht, die außerhalb des Fensters liegt.wrapper

Iakovos Ouranos
quelle
0

Was für mich funktionierte, war das Hinzufügen der Position relativ zum HTML-Tag.

html {
  min-height:100%;
  position:relative;
}
body {
  margin-bottom:60px;
}
footer {
  position:absolute;
  bottom:0;
  height:60px;
}
Bryan Labuschagne
quelle
-1 
   <style type="text/css">

     /* Sticky footer styles
     -------------------------------------------------- */

     html,
     body {
       height: 100%;
       /* The html and body elements cannot have any padding or margin. */
     }

     /* Wrapper for page content to push down footer */
     #wrap {
       min-height: 100%;
       height: auto !important;
       height: 100%;
       /* Negative indent footer by it's height */
       margin: 0 auto -60px;
     }

     /* Set the fixed height of the footer here */
     #push,
     #footer {
       height: 60px;
     }
     #footer {
       background-color: #f5f5f5;
     }

     /* Lastly, apply responsive CSS fixes as necessary */
     @media (max-width: 767px) {
       #footer {
         margin-left: -20px;
         margin-right: -20px;
         padding-left: 20px;
         padding-right: 20px;
       }
     }



     /* Custom page CSS
     -------------------------------------------------- */
     /* Not required for template or sticky footer method. */

     .container {
       width: auto;
       max-width: 680px;
     }
     .container .credit {
       margin: 20px 0;
     }

   </style>


<div id="wrap">

  <!-- Begin page content -->
  <div class="container">
    <div class="page-header">
      <h1>Sticky footer</h1>
    </div>
    <p class="lead">Pin a fixed-height footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS.</p>
    <p>Use <a href="./sticky-footer-navbar.html">the sticky footer</a> with a fixed navbar if need be, too.</p>
  </div>

  <div id="push"></div>
</div>

<div id="footer">
  <div class="container">
    <p class="muted credit">Example courtesy <a href="http://martinbean.co.uk">Martin Bean</a> and <a href="http://ryanfait.com/sticky-footer/">Ryan Fait</a>.</p>
  </div>
</div>
alpc
quelle