2016-03-21 6 views
1

私はウェブサイト上で作業していて、フッターを底に押し付けようとしました。HTML/CSSのスティッキーフッター、表示の問題

私はこの手法を適用していますhttp://mystrd.at/modern-clean-css-sticky-footer/

マイページはここで見ることができます:

html { 
    position: relative; 
    min-height: 100%; 
} 
body { 
    margin: 0 0 400px; 
} 

しかし、私はトラブルを経験しています:https://jsfiddle.net/cgLf0oLa/

を私はこのCSS入力が非常に重要であると信じています。フッタは他のコンテンツの上にレンダリングされており、コンテンツサイズに調整する方法はわかりません。 ヘルプは大歓迎です。

種類について、

クレメンス

+0

Chrome、Edge、Mozillaのフィドルリンクの下部に#footerが表示されていますが、どのブラウザで問題が発生していますか? – spaniard

+0

@spaniardブラウザのサイズを低くしてサイズを変更すると間違っています。 Position absoluteは、通常のオブジェクトフローから要素を取り除き、他のコンテンツを設定します。 – callmeniko

+0

@callmenikoブラウザのサイズを最小サイズに変更しましたが、フッタはまだ底部にあります。 – spaniard

答えて

0

高さ:afterを追加してみフッター上記ラッパーにフッタの高さに等しいです。フッターの下に空白の領域が残され、フッターが下にプッシュされます。