Kraft <div></div> auf der Unterseite der web-Seite zentriert

Ich habe eine <div>...</div> Abschnitt in meinem HTML-Code, der im Grunde wie eine Symbolleiste.

Gibt es eine Möglichkeit, ich könnte Kraft den Abschnitt am unteren Rand der web-Seite (das Dokument, nicht die viewport) und zentrieren Sie es?

InformationsquelleAutor Blankman | 2009-02-04
  1. 16

    Ich denke was du suchst ist dieser: http://ryanfait.com/sticky-footer/

    Es ist eine elegante, CSS nur Lösung!

    Ich benutze es und es funktioniert perfekt mit allen Arten von layouts in allen Browsern! Soweit ich bin besorgt, es ist die einzige elegante Lösung, die funktioniert mit allen Browsern und layouts.

    @Josh: Nein, es ist nicht, und das ist, was Blankman will, will er eine Fußzeile, die klebt an der Unterseite des Dokuments, nicht des Viewports (browser-Fenster). Also, wenn der Inhalt kürzer ist als das browser-Fenster, der footer bleibt am unteren Ende des Fensters, wenn der Inhalt länger ist, wird die Fußzeile nach unten geht und ist nicht sichtbar, bis Sie nach unten scrollen.

    Twitter Bootstrap Implementierung

    Ich habe gesehen, eine Menge Leute Fragen, wie diese kombiniert werden können mit Twitter Bootstrap. Während es einfach ist, herauszufinden, hier sind einige Ausschnitte, das sollte helfen.

    //_sticky-footer.scss SASS partial for a Ryan Fait style sticky footer

html, body {
  height: 100%;
}

.wrapper {
  min-height: 100%;
  height: auto !important;
  height: 100%;
  margin: 0 auto -1*($footerHeight + 2); /* + 2 for the two 1px borders */
}

.push {
  height: $footerHeight;
}

.wrapper > .container {
  padding-top: $navbarHeight + $gridGutterWidth;
}

@media (max-width: 480px) {
  .push {
    height: $topFooterHeight !important;
  }
  .wrapper {
    margin: 0 auto -1*($topFooterHeight + 2) !important;
  }
}

    Und die grobe markup Körper:

    <body>
    <div class="navbar navbar-fixed-top">
        //navbar content
    </div>
    <div class="wrapper">
        <div class="container">
            //main content with your grids, etc.
        </div>
        <div class="push"><!--//--></div>
    </div>
    <footer class="footer">
        //footer content
    </footer>
</body>
    • Ist die Fußzeile immer sichtbar? Unabhängig von der scroll-position?
    • Vielen Dank für die Klarstellung!
    InformationsquelleAutor markus
  2. 5

    Wenn ich Sie richtig verstehe, wollen Sie die Symbolleiste zu immer sichtbar sein, unabhängig von der vertikalen scroll-position. Wenn das richtig ist, würde ich empfehlen, die folgenden CSS...

      body {
    margin:0;
    padding:0;
    z-index:0;
  }

  #toolbar {
    background:#ddd;
    border-top:solid 1px #666;
    bottom:0;
    height:15px;
    padding:5px;
    position:fixed;
    width:100%;
    z-index:1000;
  }
    • +1 Hilft mir. Thnx
    • Josh, cross-browser Probleme mit dieser Technik?
    • Gut, ich weiß, dass der IE6 nicht unterstützt Feste Positionierung. Aber ich versuchte es im IE7 und FF2 und es funktioniert.
    • Dies funktioniert nicht in Safari auf dem iPhone... dang.
    • Ich Frage mich, ob hinzufügen von position:relative, um den Körper fixes, die
    • position:relative macht es, damit es nicht auf den Boden kleben.

    InformationsquelleAutor Josh Stodola
  3. 3

    Ich will nur klar sein, was Ihr hier sagen:

    unteren Rand der web-Seite (die
    Dokument, nicht die viewport)

    Natürlich, ein div-Element werden am unteren Rand des "document", je nach Ihrem layout.

    Wenn es nicht an den unteren Rand eines Dokuments, oder nicht die Aufmerksamkeit auf, wie groß die Spalten sind, ist es weil Ihr zu treiben? Clear: both; wäre um Sie zu lösen.

    Des sticky footers sind, was ich glaube, was Ihr sucht, aber wenn du sagst Dokument, und nicht den viewport, bekomme ich ein bisschen verwirrt. Sticky footers dies normalerweise tun: Sehen Sie für die kurzen Seiten, und wenn Sie kürzer ist als die view-port, der sticky footer Nägel der footer-div an den unteren Rand.

    Hier einige klebrige Fußzeilen (es gibt gajillions der em, aber das ist in der Reihenfolge meine Favoriten):

    Vielleicht, wenn Sie gab eine kurze Verdeutlichung oder waren ein bisschen genauer, was Sie wollen? Hoffe, das hilft 😀

    -Ken

    • Ich denke, dass er nur ment, dass, wenn das Dokument länger ist als der viewport, sollte die Fußzeile nicht angezeigt, bis Sie einen Bildlauf zum Ende. was ist ein sticky footer. mit position absolute Sie würde sich ein sticky viewport-Fußzeile, die in den meisten Fällen hässlich.
    InformationsquelleAutor Ken Hanson
  4. 0

    Versuchen Sie dies: Fixed Fußzeilen ohne Javascript. Ich weiß nicht, ob es eine perfekte Passform, aber ich denke, es ist nah genug.

    • Funktioniert nicht, wenn die Größe des browser für mich. Sieht gut aus auch sonst-an den unteren Rand des Dokuments, oder, wenn das Dokument nicht scrollen, um den unteren Rand des Viewports (statt nur schweben).
    InformationsquelleAutor Srdjan Pejic
  5. 0

    Können Sie nur geben die div a:

    clear:both; text-align:center;

    und setzen die div-als letztes element vor dem schließenden body-Anweisung. Das wäre Kraft es zu sein, das Letzte element, ohne das etwas daneben.

    InformationsquelleAutor jeroen
  6. 0

    Ihre beste Wette ist, um die javascript verwenden, um zu bestimmen, die Größe Ihrer Seite. Sie können die Höhe mit dem Fenster.innerHeight mit nicht-IE-Browser und Dokument.documentElement.clientHeight mit dem IE. Mit diesem Wert sollten Sie in der Lage sein, um absolut positionieren Sie Ihr element auf der Seite Einstellung top-Wert minus die Höhe des div. Wenn die Höhe des div ist die variable, die Sie benötigen, um zu überprüfen, die div ' s offsetHeight-Eigenschaft, um die Reale Höhe.

    Zur Zentrierung verwenden Sie das folgende Beispiel:

     <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <style>
            .wrapper
            {
                width: 100%;
                padding-left: 50%;
            }
            .test
            {
                width: 400px;
                margin-left: -200px;
                border: 1px solid black;
                padding-left: -200px;
            }
        </style>
    </head>
    <div class="wrapper">
    <div class="test">This is a test</div>
    </div>
 </html>

    Haben Sie ein wrapper-div um das div, die Sie wollen zentriert. Das wrapper-div hat eine Breite von 100% das innere div hat eine Breite festgelegt, was Sie wollen, es zu werden. Geben Sie dem wrapper-div ein padding auf der linken Seite der 50% und der innere div einen negativen linken margin in der Höhe der Hälfte seiner Breite.

    • -1, weil er spricht über den viewport, das ist nicht das, was er will!
    InformationsquelleAutor Ross Pace
Schreibe einen Kommentar