内側の要素に余白と余白が付いているスティッキーフッタ（Ryan Fait）

Question

私は頭を包むことができないという問題があります。疲れているからかもしれません。私はRyan's Fait sticky footerを使用していますが、あなたのほとんどがよく知っていると確信しています。私はそれを定期的に使用し、今までそれには何の問題もなかった。私が働いているデザインには、いくつかの内側の子要素があるフッターがあります。

要素の1つである.newsletterは、背景にイメージを配置できるようにパディングや余白を使用してワイドギャップを作成しています。正しい高さを入力してもオーバーフローが発生しています。パディングを削除すると、問題が解決されます。私はoverflow: hiddenを使用することが選択肢だと知っていますが、私はむしろその原因を見つけ出すでしょう。ニュースレターに設定されたマージンやパディングなし

画面：：ニュースレター要素内で設定マージンやパディングと

スクリーンショット

動作していないCSS：

body { 
    background: #212121; 
    color: #ddd; 
    padding: 0; 
    margin: 0; 
    font-family: "Open Sans", "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif; 
    font-weight: normal; 
    font-style: normal; 
    line-height: 1; 
    position: relative; 
    cursor: default; 
    height: 100%; 
} 

.maincontainer { 
    min-height: 100%; 
    height: auto !important; 
    height: 100%; 
    margin: 0 auto -424px; 
    width: 100%; 
} 

.mainfooter, .push { 
    height: 424px; 
    width: 100%; 
} 

.newsletter { 
    padding: 1.875rem 0 1.875rem; 
} 

.newsletter-fix { 
    background: #000; 
    padding: 3rem 0 1rem; 
    color: #ddd; 
} 

ワーキングCSS：

は、単に次のように上述したものから、次の値を変更し、問題を解決しますが、私はニュースレターの間のパディング、または余白のギャップをしたいです。

.maincontainer { 
    margin: 0 auto -394px; 
} 

.mainfooter, .push { 
    height: 394px; 
} 

.newsletter { 
    padding: 0; 
} 

Answer 1

私は非常に試して愚かだと思われるでしょう！私は誰もが一度見て時間をかけていただきありがとうございますが、それはユーザーエラーのように簡単です。

問題は、最初の色のビット（この場合はbackground: #000の.newsletterfix）から数えて、それ以上の目に見えないパディングを考慮しなかったためです。愚かな、私。

例：

Answer 2

あなたはあなたのフッター内の別の要素に背景色を置くのではなく、あなたの.mainfooterにbackground-color : blackを置けば？