奇妙な応答/スティッキーフッターの問題

Question

画面の解像度が一定のポイントに達したときにフッターに問題が発生しました。応答して画面サイズで動作しますが、フッターの上半分だけが背景になります。私は0に底を設定しました。位置は絶対に設定されていますが、見栄えが良くありません。どんな助けもありがとう。 Webページへ

リンク（私が話しているかを確認するために応答性でプレイしてください）：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

私は見ています問題があります.leftおよび.rightクラスにあります。 transform: translateY(25%);という属性があり、自然な位置を過ぎて押し下げています。あなたはフッターがページの一番下に座って、同じ外観を持つようにしたい場合は、彼らは今、そうのようなあなたのCSSを変更します：

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

は基本的に私はちょうどそれらのdivからtranslateすべてのプロパティを削除からmargin-bottomを削除しましたulを追加し、padding-bottomを追加します。 max-heightがfooterタグから削除されている場合、パディングはページの下部からいくらかのスペースを与え、フッターの背景を展開して下部にギャップを残さないようにします。