Halten Fußzeile am unteren Rand, aber nicht klebrig?

Meine grundlegende layout ist einfach:

<header></header>
<main></main>
<footer></footer>

Wenn ich meine Fußzeile position:fixed es hält sich an der Unterseite der Seite, aber ist ein "sticky" footer und bedeckt content beim scrollen erforderlich ist.

Ich würde gerne zu halten, der footer unten, aber nicht fixed.

Ist dies sogar mit reinem css?

Geige

so Etwas wie dieses ?

InformationsquelleAutor justinw | 2014-04-26

1

Es ist position:absolute;. Dies Ist eine CSS-Eigenschaft, die Ihnen erlaubt zu kontrollieren, die genaue Position von jedem element. Zum Beispiel:
```
<style>
footer {
position:absolute;
top:(numberofuntits)px;
left: (numberofUnits)px;
}

</style>
```
Dies macht es so egal was passiert, auf der Seite, es bleibt im Ort, ein bisschen wie behoben, nur mehr bestimmte. Obwohl ich denke, dass das, was Sie wirklich brauchen, ist position:relative; So dass es passt die Fußzeile relativ zu anderen Elementen auf der Seite. Zu übernehmen, habe ich Hinzugefügt einige andere nützliche Stile möchten Sie vielleicht in Erwägung ziehen... (fand diese auf http://www.w3schools.com) ich hoffe das ist was Sie brauchen:
```
 <style>
footer {
    clear: both; //prevents floating elements from right/left of footer
    position: relative; //Positions footer relative to other elements on hte page
    z-index: 1; //z-index positions elements in front or behind eachother, most have a //natual z-index of -1
    height: -3em; //exactly what it says...
    margin-top: 40em; //moves footer to bottom of all elements
}
</style>
```
Hoffe, das Hilft!

InformationsquelleAutor Brendan
0

Einfachste Weg, mit deinem code ist, bewegen Ihre in die-tag und entfernen position: fixed aus Ihren CSS-code.
```
<header></header>
<main><footer></footer></main>
```
- und in deiner CSS:
```
footer {
    background: grey;
    bottom: 0;
    width: 100%;
    padding: 20px;
}
```
- Sie soll sich nicht wiederholenden Inhalten innerhalb main. Gemäß W3C, "Der Hauptinhalt eines Dokuments enthält Inhalte, die einzigartig ist, dass das Dokument und schließt die Inhalte, die wiederholt über eine Reihe von Dokumenten, wie Website-Navigations-links, copyright-Informationen, Website, logos und Banner, und die Suche nach Formen (es sei denn, das Dokument oder Anwendungen, die main-Funktion ist, dass ein such-Formular)."
InformationsquelleAutor Duniyadnd

Einfach, ändern Sie diese:

body {
    position: relative;
}
footer {
    position:absolute;
    background-color: grey;
    bottom:0;
    width: calc(100% - 40px);
    padding: 20px;
}