Wie halten die Fußzeile am unteren Rand der Seite (HTML, Javascript, CSS)

Wie kann ich die Fußzeile am unteren Rand der Seite? Hier ist mein code:

<footer> Copyright 2013 All rights reserved.

Dass es über. Gibt es eine CSS dass ich verwenden können, um zu bringen die Fußzeile unten auf der Seite, weil wenn ich den <footer> code es bleibt in der Mitte statt unten.

  • können Sie schreiben, eine demo auf jsbin.com
InformationsquelleAutor user2277747 | 2013-04-24
  1. 8

    Können Sie nur verwenden CSS:

    .footer {
    position:fixed;bottom:0;

    width:100%;
    display:block;
}
    • Dadurch wird die Fußzeile-stick an den unteren Rand des browser-Fenster jederzeit sichtbar, überlappende andere Inhalte, wenn die Seite länger ist. Ich denke der OP muss klären, wenn Sie wollen, dass, wenn dies ist nur über die kürzeren Seiten, die erreichen nicht die Falten.
    • Ahhhh. Auch wenn der OP will etwas anderes, ich würde jquery waypoints (imakewebthings.com/jquery-waypoints) zu hören, um die position des scroll-point (oder anderes element), und wenn der Schwellenwert erreicht, die oben genannten.
    InformationsquelleAutor jahrichie
  2. 2

    Benutze ich: 

    #footerbox {
height:125px;width:55%;
background: #333;
position:absolute;
bottom:50px;
left:0;
right:0;
margin-left:auto;
margin-right:auto;
color:#FF9966;
font: normal 13px verdana, sans-serif;

    Ich würde vorschlagen, die Einstellung der Höhe an, was du willst, aber ich halte es größer haben alle Informationen, die in es wie Rechtliches, Kontakt, info, usw. Dann, für die Kopie richtig, ich verwende

    #copyright {
height:20px;width:55%;
background: #333;
position:absolute;
bottom:50px;
left:0;
right:0;
margin-left:auto;
margin-right:auto;
color:#FFFFFF;
font: normal 13px verdana, sans-serif;
border-top:2px solid #FF9966;
}

    Hoffe, das hilft etwas. Sie können auch die Breite, was Sie wollen, Pixel oder Prozent. Es wäre nicht zu schwer, um es an der Unterseite, wenn das, was Sie wollen. Um das Urheberrecht überschneiden sich die größeren Fußzeile, verwenden Sie einfach 

    .class{
clear:both;
}

    oben bei den CSS-Dateien und deaktivieren Sie anschließend die P-tags im HTML-wie so 

    <div id="copyright">
<p class="clear">&copy herp derp</p>
</div>
    InformationsquelleAutor Nash Read
  3. 0

    1) geben Sie die <body> eine Höhe von 100%

    body { height:100%; }

    2) unter der Annahme einer HTML-Struktur wie diese:

    <div id="container">
  some content
</div>
<footer>
  Copyright 2013 All rights reserved.
</footer>

    und vorausgesetzt, Ihr <footer> ist 40px in der Höhe, dann fügen Sie diese zu #container:

    #container { min-height:100%; padding-bottom:40px; margin-bottom:-40px; }
    InformationsquelleAutor bobsoap
Schreibe einen Kommentar