Fußzeile nicht am unteren Rand der Seite Medienabfragen

-1

Ich habe versucht, die folgenden für meine Website-Fußzeile nur am unteren Rand einer Seite bleiben. (Auf allen anderen Seiten funktioniert es wie geplant, aber nicht auf einem, warum ist das so?)Fußzeile nicht am unteren Rand der Seite Medienabfragen

Dies ist, was ich benutze und obwohl es funktioniert, funktioniert es nicht über alle Handys/Tablet-Geräte.

Hilfe?

Quelle

2016-07-20 trying to create my website

@media Bildschirm und (min-Breite: 567px) und (max-width: 661px) { \t .page-id-94. site-footer { \t \t klar: beide; \t \t Breite: 100%; \t \t Höhe: 10%; \t \t Position: relativ; \t \t unten: -750px; \t \t Polsterung oben: 1%; } \t } –

@media Bildschirm und (min-Breite: 220px) und (max-width: 420px) { \t .page-ID-94-.Site Footer { \t \t clear: both; \t \t Breite: 100%; \t \t Höhe: 10%; \t \t Position: relativ; \t \t unten: -1050px; \t \t Polsterung oben: 1%; } \t } –

@media Bildschirm und (min-Breite: 221px) und (max-width: 241px) { \t .page-ID-94-.Site Footer { \t \t clear: both; \t \t Breite: 100%; \t \t Höhe: 10%; \t \t Position: relativ; \t \t unten: -1500px; \t \t Polsterung oben: 1%; \t} } –

ich Ihre Fragen nicht zu erforschen, aber heutzutage kann man sticky Footer mit folgenden Auszeichnungs erreichen:

<div class="page-wrapper"> 
    <header>Hi! I'm Header!</header> 
    <main>And I'm Main content section! Let's rock!</main> 
    <footer>Hi! I'm Footer!</footer> 
</div> 

.page-wrapper { 
    display: flex; 
    flex-direction: column; 
    min-height: 100%; 
    min-height: 100vh; 
    width: 100%; 
} 

header, 
footer { 
    height: 50px; 
} 

main { 
    flex: 1; 
}

Siehe die Geige über here

Quelle

2016-07-20 17:56:02 markoffden

ich diese Methode in der Vergangenheit verwendet haben und es funktioniert perfekt .

HTML:

<!DOCTYPE html> 
<head> 
    <title></title> 
</head> 
<body> 
    <nav></nav> 
    <article>Lorem ipsum...</article> 
    <footer></footer> 
</body> 
</html>

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%; 
}

Quelle

2016-07-20 18:36:09 Kim

das funktioniert nicht für mich, weil das Kopieren dieses Codes bedeutet, dass ein Teil meiner Seite (n) mit einem weißen Container abgedeckt ist. Ich schrieb es als .pg-id-94 .site-footer html { Position: relativ; min-Höhe: 100%; } Körper { Rand: 0 0 100px;/* unten = Fußhöhe */ } Fußzeile { Position: absolut; links: 0; unten: 0; Höhe: 100px; Breite: 100%; } –

Vielleicht muss ich den Code auf andere Weise neu schreiben, aber ich weiß nicht wie. –

Fußzeile nicht am unteren Rand der Seite Medienabfragen

Antwort

Verwandte Themen