html Element mit Höhenattribut 100% decken nicht das ganze Fenster ab

-1

Ich möchte eine Fußzeile im unteren Bereich meiner Seite haben. Ich habe viele verschiedene Tutorials verfolgt, aber es wird nicht funktionieren. Wenn ich meinen Bildschirm skaliere, bis eine Bildlaufleiste vorhanden ist, befindet sich die Fußzeile an der Unterseite des Fensters und nicht am Ende der Seite.html Element mit Höhenattribut 100% decken nicht das ganze Fenster ab

das ist mein CSS:

html { 
    height: 100%; 
    box-sizing: border-box; 
} 
*, 
*:before, 
*:after { 
    box-sizing: inherit; 
} 
body{ 
    position: relative; 
    font-size: 10px; 
    font-family: Arial, Helvetica, sans-serif; 
    min-height: 100%; 
    padding-bottom: 40px; 
    margin: 0; 
} 
#footer{ 
    position: absolute; 
    bottom: 0; 
    right: 0; 
    left: 0; 
    margin-left: 16%; 
    margin-right: 16%; 
    font-size: 11px; 
    margin-top: 20px; 
    margin-bottom: 15px; 
    width: 68%; 
}

HTML-Struktur:

<!DOCTYPE html> 
<html lang="nl"> 
    <body> 
      <nav> 
       .... 
      </nav> 
      <div id="content"> 
       .... 
      </div> 
      <div id="footer"> 
       .... 
      </div> 
    </body> 
</html>

Bilder:

the footer at the bottem of the window

when I scroll down

Kann mir jemand helfen?

danke im voraus!

Quelle

2016-10-20 Mathies Gielen

Bitte senden Sie den entsprechenden HTML. 'height: 100%' bedeutet, dass das Element 100% seiner Eltern ist. Wenn Sie eine Höhe von 100% auf Ihrem 'html' setzen, stellen Sie die HTML-Höhe möglicherweise auf die Höhe Ihres Fensters ein. Vielleicht würde deshalb eine absolute Position die Fensterposition anstelle des Körpers verwenden. Auch hier kann ich ohne HTML nicht sicher sein. – Santi

Ich habe den Beitrag bearbeitet –

Da muss etwas anderes sein, weil Ihr Code mit diesem Beispiel in Ordnung ist. Verwenden Sie Iframes? Bitte versuchen Sie einen Ausschnitt zu setzen

Auch wenn Sie mit float Positionierung ein Element haben Sie ein <div style='clear:both> `vor der #footer div setzen sollten, schwimmende Elemente könnten eine Menge seltsamer Dinge tun, wenn Sie nicht klar machen.

html { 
 
    height: 100%; 
 
    box-sizing: border-box; 
 
} 
 
*, 
 
*:before, 
 
*:after { 
 
    box-sizing: inherit; 
 
} 
 
body{ 
 
    position: relative; 
 
    font-size: 10px; 
 
    font-family: Arial, Helvetica, sans-serif; 
 
    min-height: 100%; 
 
    padding-bottom: 40px; 
 
    margin: 0; 
 
} 
 
#footer{ 
 
    position: absolute; 
 
    bottom: 0; 
 
    right: 0; 
 
    left: 0; 
 
    margin-left: 16%; 
 
    margin-right: 16%; 
 
    font-size: 11px; 
 
    margin-top: 20px; 
 
    margin-bottom: 15px; 
 
    width: 68%; 
 
}

<html> 
 
    <body> 
 
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> 
 
    <div id="footer"> footer</div> 
 
    </body> 
 
    </html>

Quelle

2016-10-20 14:13:41

Hier ist ein fantastischer Weg, eine Fußzeile am unteren Rand der Seite zu bleiben, ohne Höhe mit: 100%.

.Site { 
 
    display: flex; 
 
    min-height: 100vh; 
 
    flex-direction: column; 
 
} 
 

 
.Site-content { 
 
    flex: 1; 
 
}

<body class="Site"> 
 
    <header>header stuff!</header> 
 
    <main class="Site-content">Main Content stuff</main> 
 
    <footer>footer stuff!</footer> 
 
</body>

Quelle

2016-10-20 14:18:08

html Element mit Höhenattribut 100% decken nicht das ganze Fenster ab

Antwort

Verwandte Themen