webentwicklung-frage-antwort-db.com.de

HTML 5-Fußzeilen-Tag immer unten sein

Ich entwickle eine Website in HTML 5. Ich füge meinen gesamten Inhalt der Fußzeile in einem Fußzeilen-Tag ein. Wie der Code unten 

<!DOCTYPE html>

<html>
<head></head>
<body>
<header>
<h1>Talking Dogs</h1>
<b><p>Humans aren't the only talkers!</p></b>
</header>
<article>
<p>Ever encountered a talking dog? I have.</p>
<p>It all happened one day as I was walking down the street...</p>
</article>
<footer>
© 2009 Woofer Dog Corporation
</footer>
</body>
</html>

Der obige Code ist jedoch nicht der tatsächliche Site-Code, da ich ihn nicht freigeben kann. Kann mir jemand bitte den besten Weg empfehlen, dies in HTML 5 zu tun, damit es auf allen gängigen Browsern wie IE-6,7,8/Firefox/Safari/Crome/Opera funktioniert

19
vaibought

Der Fußzeilen-Tag von HTML5 fügt den Inhalt nicht magisch an den Fuß der Seite - Sie müssen ihn immer noch so gestalten, wie Sie es immer getan haben. In dieser Hinsicht funktioniert es genau wie ein <div>, daher sollten Sie es als solches behandeln, indem Sie CSS angeben, damit es wie beabsichtigt angezeigt wird:

footer {
   //CSS code to make it display at the bottom, same as you would have done for a div.
}

Fußzeilen am unteren Rand der Seite werden als "klebrige Fußzeilen" bezeichnet. Weitere Informationen zum Erreichen des Effekts finden Sie hier: http://www.cssstickyfooter.com/

Das <footer>-Tag selbst (zusammen mit allen anderen neuen HTML5-Tags) ist nicht für Layoutmagie, sondern für semantische Zwecke gedacht. Das heißt, um jemandem, der den Code liest (oder wahrscheinlicher einem Bot), klar zu machen, dass die Daten in dem Tag Fußzeilendaten sind.

In Bezug auf die Browserunterstützung können Sie bei allen aktuellen Browsern die neuen HTML5-Tags mit Ausnahme von IE angeben. Glücklicherweise können jedoch alle Versionen von IE (sogar IE6) durch Hinzufügen des HTML5Shiv-Hack in deiner Seite.

Hoffentlich hilft das.

36
Spudley

Dies sollte Sie dahin bringen, wo Sie hin möchten: (bearbeitet, um eine zusätzliche Zeile hinzuzufügen, damit Code-Markup gut angezeigt wird)

Das grundlegende HTML: 

<footer>
    <div class="colwrapper">
        <div class="fltcol">col1</div>
        <div class="fltcol">col1</div>
        <div class="fltcol">col1</div>
    </div>
</footer>

Hier ist das CSS:

html {
    position: relative;
    min-height: 100%;
}

body {
    margin: 0 0 100px; /* bottom = footer height */
}

footer {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 100px;
    width: 100%;
    background-color: #949494;
    color: #ffffff;
}

.colwrapper{
    -moz-column-count:3; /* Firefox */
    -webkit-column-count:3; /* Safari and Chrome */
    column-count:3;
}

/* Specify a 40 pixels gap between the columns: */
-moz-column-gap:40px; /* Firefox */
-webkit-column-gap:40px; /* Safari and Chrome */
column-gap:40px;

/* Specify the width, style and color of the rule between columns: */

-moz-column-rule:3px outset #ff00ff; /* Firefox */
-webkit-column-rule:3px outset #ff00ff; /* Safari and Chrome */
column-rule:3px outset #ff00ff;
}
4
socialmatchbox

Während Leute html5shiv vorschlagen, empfehle ich auch, modernizr zu verwenden: 

http://www.modernizr.com/

Und vielleicht auch mal schauen:

http://html5boilerplate.com/

Dies hilft allen Browsern, Ihre Site richtig darzustellen. Viel Glück.

2
rickyduck

Sie machen dies genauso wie in HTML4.01.

0
Rob

Es gibt eine schöne JS, die HTML5-Unterstützung für IE <9 bietet ... die anderen Browser unterstützen bereits die HTML5-Elemente.

https://code.google.com/p/html5shiv/#

0
albuvee

Die Verwendung der absoluten Position für <footer> funktioniert, aber wenn Sie mit zunehmender Hauptbreite einen erweiterten Inhalt haben, wird das Problem angezeigt. Wenn Sie die Inspektion verwenden, hängt die Fußzeile in der Mitte des Bildschirms. Keine perfekte Lösung, aber die Verwendung eines festen Bodens löst das Problem einfach.

0
Derya