webentwicklung-frage-antwort-db.com.de

Wie stelle ich eine Fußzeile in CSS unter?

Ich habe das klassische Problem bei der Positionierung einer Fußzeile am unteren Rand des Browsers. Ich habe Methoden wie http://ryanfait.com/resources/footer-stick-to-bottom-of-page/ ausprobiert - aber zu keinem guten Ergebnis: Meine Fußzeile wird immer in der Mitte des Browserfensters angezeigt in FF und IE. 

Im HTML habe ich diese einfache Struktur bekommen

<form>
 ...
 <div class=Main />
 <div id=Footer />
</form>

Hier ist der CSS-Code, der für das Problem der CSS-Fußzeile relevant ist:

    *
    {
        margin: 0;
    }


html, body
{
    height: 100%;
}


    #Footer
    {
        background-color: #004669;
        font-family: Tahoma, Arial;
        font-size: 0.7em;
        color: White;
        position: relative;
        height: 4em;
    }



    .Main
    {
        position:relative;
        min-height:100%;
        height:auto !important;
        height:100%;

        /*top: 50px;*/

        margin: 0 25% -4em 25%;

        font-family: Verdana, Arial, Tahoma, Times New Roman;
        font-size: 0.8em;
        Word-spacing: 1px;
        line-height: 170%;
        /*padding-bottom: 40px;*/
    }

Wo mache ich falsch? Ich habe wirklich alles versucht. Wenn ich nützliche Informationen verpasst habe, lass es mich wissen.

Vielen Dank für jeden Vorschlag im Voraus.

Grüße,

danke euch allen für eure antworten .. es klappte mit:

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

einstellungsposition: behoben in IE aus irgendeinem Grund (Fußzeile in der Mitte des Browsers wurde noch immer angezeigt), funktionierte nur für FF.

csssticky-footer
38
Amc_rtty

Stellen Sie die Stile Ihrer Fußzeile auf position:absolute; und bottom:0;.

43
Nick Larsen
#Footer {
  position:fixed;
  bottom:0;
}

Dadurch bleibt die Fußzeile am unteren Rand des Browserfensters, unabhängig davon, wo Sie blättern.

25
codedude
#Footer {
position:fixed;
bottom:0;
width:100%;
}

arbeitete für mich

9
Sheikh Naveed
#footer{
position: fixed; 
bottom: 0;
}

http://codepen.io/smarty_tech/pen/grzMZr

4
Bhawna Malhotra

Ich denke, viele Leute suchen nach einer Fußzeile auf der Unterseite, die scrollt, anstatt fixiert zu werden, eine klebrige Fußzeile. Feste Fußzeilen decken den Körperinhalt ab, wenn die Höhe zu kurz ist. Sie müssen den HTML-, Haupt- und Seitencontainer auf eine Höhe von 100% setzen, Ihre Fußzeile auf die absolute Position unten setzen. Ihr Seiteninhalt-Container benötigt eine relative Position, damit dies funktioniert. Ihre Fußzeile hat einen negativen Rand, der der Höhe der Fußzeile minus dem unteren Rand des Seiteninhalts entspricht. Siehe die Beispielseite, die ich gepostet habe.

Beispiel mit Anmerkungen: http://markbokil.com/code/bottomfooter/

3
mbokil

Das hat für mich funktioniert:

.footer
{
  width: 100%;
  bottom: 0;
  clear: both;
}
1
rzskhr

Wenn Sie "position: fixed; bottom: 0;" Ihre Fußzeile wird immer am unteren Rand angezeigt und Ihr Inhalt wird ausgeblendet, wenn die Seite länger als das Browserfenster ist.

0
Chtiwi Malek

Die folgende css-Eigenschaft wird dies tun

position: fixed;

Ich hoffe diese Hilfe.

0
Abdelhameed Mahmoud

In modernen Browsern können Sie das Layout flex verwenden, um sicherzustellen, dass die Fußzeile unabhängig von der Länge des Inhalts am unteren Rand bleibt (und der untere Rand den Inhalt nicht verdeckt, wenn er zu lang ist).

HTML-Layout:

<div class="layout-wrapper">
  <header>My header</header>
  <section class="page-content">My Main page content</section>
  <footer>My footer</footer>
</div>

CSS:

html, body {
  min-height: 100vh;
  width: 100%;
  padding: 0;
  margin: 0;
}

.layout-wrapper {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.layout-wrapper > .page-content {
  background: cornflowerblue;
  color: white;
  padding: 20px;
}

.layout-wrapper > header, .layout-wrapper > footer {
  background: #C0C0C0;
  padding: 20px 0;
}

Demo: https://codepen.io/datvm/pen/vPWXOQ

0
Luke Vo