2017-10-29 7 views
0

Ich habe eine Lücke am Fuß meiner Seite - aber nur in Chrome. Ich habe viele Dinge ausprobiert, hauptsächlich aus dieser Frage & Antwort here.Chrome - weißer Platz am Ende der Website

Ich bin mir ziemlich sicher, es ist ein Ganzkörper-Problem - ich legte eine border-bottom: 2px solid red; Regel auf Körper und es kam über den Leerraum.

foot of page - white space

Hier ist mein Stil-Code für Körper und Fußzeilen -

body { 

    display: flex; 
    min-height: 100vh; 
    flex-direction: column; 
    margin-bottom: 6rem; 
    font-family: 'GothamLight', sans-serif !important; 
    font-size: 16px !important; 
    border-bottom: 2px solid red; 

} 

footer { 

    margin-top: auto; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    height: auto; 
    width: auto; 
    background-color: black; 
} 


footer #email { 
    text-align: center; 
    color: white; 
/* font-weight: bold; */ 
    padding-top: 50px; 
    font-size: small; 
} 

    p #email { 

    padding: 10px; 

} 

footer #socialmedia { 

    text-align: center; 
    position: relative; 
    top: 75%; 

} 

Ist alles da drin, dass könnte es verursachen? Wie bereits erwähnt, gibt es kein Problem in Firefox und/oder Safari - nur Chrome. Und es passiert auf allen Seiten der Website. Wie repariere ich es?

+0

Was ist, wenn Sie Rand unten setzen: 0; in Körper – RDangol

Antwort

1

Es sieht aus wie Padding-Problem, überprüfen Sie auf Polsterung durch Ändern, und überprüfen Sie durch Entfernen der relativen Position. denke, dass es Padding von jeder CSS-Datei bekommen.

Fußzeile #socialmedia {

text-align: center; 
position: relative;// remove it than check 
top: 75%; 

}

+0

Das ist die Lücke los, aber jetzt werden meine Social Media Icons nicht mehr dort bleiben, wo sie vorher waren, weil 'top' nicht funktioniert. –

0

eine CssClass in Social Media Div verwenden und als es in CSS nennen und auf diese Weise stellen Sie Ihre Social-Media-Symbole entsprechend.

+0

Was meinst du? –

+0

Verwenden Sie eine CSSClass statt Klasse oder ID ... ich denke, Sie verwenden ID. also ersetze es mit cssclass = 'socialmedia' und in css nenn es mit dem .socialmedia –

+0

Sorry, das funktioniert nicht Ich brauche eine Lösung, die das Problem löst, ohne den aktuellen Code zu stören –

0

Ich habe etwas mehr auf Google graben und fand die Antwort von here.

So jetzt ich nur overflow: hidden; in meinem Fußzeile Stil Regeln und es entfernt den Leerraum.

Verwandte Themen