Weird responsive/sticky footer Probleme

Question

Meine Fußzeile hat einige seltsame Probleme, wenn die Bildschirmauflösung zu einem bestimmten Punkt kommt - es reagiert und arbeitet mit der Bildschirmgröße, aber nur die obere Hälfte der Fußzeile hat einen Hintergrund. Ich habe unten auf 0 gesetzt; und die Position ist absolut, aber es sieht einfach nicht gut aus. Jede Hilfe wäre willkommen.

Link zur Webseite (unbedingt mit der Ansprechbarkeit spielen, um zu sehen, was ich rede): http://cardspoiler.com/Cardspoiler/MSoG/Navbar/Mage.html

HTML: https://github.com/Bonteqq/Cardspoiler/blob/gh-pages/Cardspoiler/MSoG/Navbar/Mage.html

CSS: https://github.com/Bonteqq/Cardspoiler/blob/gh-pages/Cardspoiler/Cardspoiler.css

Answer 1

Die Frage, die ich zu sehen bin, ist in den .left und .right Klassen. Sie haben ein Attribut transform: translateY(25%); auf sie, die sie über ihre natürlichen Positionen nach unten drückt. Wenn Sie Ihre Fußzeile am unteren Rand der Seite sitzen wollen und haben das gleiche Aussehen sie ändern sich jetzt Ihre CSS wie folgt:

footer { 
    position: absolute; 
    bottom: 0; 
    width: 100%; 
    background-color: rgba(128,128,128,.3); 
    text-align: center; 
    border-top: 1px solid #232526; 
} 

.left, .right { 
    display: inline-block; 
    list-style-type: none; 
    width: auto; 
    font-size: 100%; 
    vertical-align: top; 
    bottom: 0; 
    margin-bottom: 0; 
    padding-bottom: 10px; 
} 

.right li { 
    text-align: left; 
} 

Im Grunde nur ich alle der translate Eigenschaften entfernt von denen divs die margin-bottom entfernt von die ul s und Hinzufügen von einigen padding-bottom zu ihnen. Mit dem max-height entfernt von der footer Tag der Polsterung gibt etwas Platz von der Unterseite der Seite und erweitert den Footer-Hintergrund, so dass es keine Lücke am unteren Rand.