it-swarm.com.de

Wie erstelle ich eine klebrige Fußzeile, die gut mit Bootstrap 3

Mit oder ohne Top-Navi haben Websites häufig eine klebrige Fußzeile. Bootstrap hat eine Funktion zum einfachen Erstellen von festen Fußzeilen, aber keine solche Funktion Für die Erstellung klebriger Fußzeilen gibt es einen großen Unterschied.

Wenn Sie diese Frage googeln, wird sich herausstellen, dass Hunderte, wenn nicht Tausende von Entwicklern dieselbe Frage haben, aber keine gute Antwort finden.

Ironischerweise hat die Bootstrap-Dokumentation -Seite selbst eine klebrige Fußzeile neben bootstrap Styling und eine feste obere Navigationsleiste. Es ist jedoch alles benutzerdefiniert und nicht Teil des Frameworks. Also Ein naheliegender Weg ist es, ihr benutzerdefiniertes Styling zu übernehmen und zu überarbeiten, da es offensichtlich im Rahmen von Bootstrap=) gut funktioniert, aber das scheint schmerzhafter zu sein, als es sein sollte.

Siehe this plunkr für eine Beispielseite mit einer Bootstrap top navbar und einer unerwünschten, nicht klebrigen Fußzeile.

Problem:

(Danke Softlayer - für die Grafik )

A non-sticky footer is pretty ugly

Gewünschte Lösung:

A sticky footer is always at the bottom

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

77

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

In diesem Beispiel ist jedoch keine Top-Navigation enthalten. Informationen zu Navigationsgeräten mit fester Oberseite und klebriger Fußzeile finden Sie unter this plnkr oder im folgenden Code.

Style 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>
77

Lösungen für klebrige Fußzeilen, 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 Unterbrechungspunkten ändert) ungünstig. Die einfachste Lösung für responsive Sticky Footer, die ich je gesehen habe, ist die Verwendung von display: table auf 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/

24
Chris Peckham

Der beste Weg ist, wie folgt vorzugehen:
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;
}

Ein weiteres kleines Tweak könnte es perfekter machen (hängt von Ihrem Projekt ab), so dass es sich nicht auf die Fußzeile in mobilen Ansichten auswirkt.

@media (max-width:768px){ .footer{position:absolute;width:100%;} }
@media (min-width:768px){ .footer{position:absolute;bottom:0;height:60px;width:100%;}}
19
abmmhasan

Ich habe nach einem einfachen Weg gesucht, um die klebrige Fußzeile zum Laufen zu bringen. Ich habe gerade ein class="navbar-fixed-bottom "und es hat sofort funktioniert. Beachten Sie nur, dass Sie die Einstellungen in der Fußzeile für Mobilgeräte anpassen müssen. Prost!

15
Panchope

Für diejenigen, die nach einer leichten 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-bottom zum Hinzufügen von Leerzeichen zwischen Inhalt und Fußzeile.

6
Eshanel

Ich werde näher auf das eingehen, was Robodo in einem der obigen Kommentare gesagt hat: Ein wirklich schneller und gut aussehender Ansatz, bei dem keine Hacks erforderlich sind, ist die Verwendung der Flexbox. Wenn Sie nicht von Browsern unterstützt werden, 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

2
adanski

Da die Site in bootstrap 3 ist, wird sie jQuery verwenden. 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.

1
MichaelJTaylor

leicht einzustellen

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

zu deinem .footer

tU es einfach

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

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

... wo die Höhe der Fußzeile 80px beträgt. calc berechnet die Höhe des Wrappers so, dass sie der Höhe des Fensters minus der Höhe der Fußzeile (80px) entspricht, die außerhalb des .wrapper

1
Iakovos Ouranos

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;
}
1
Charles Ingalls

Was für mich funktioniert hat, 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;
}
0