html - div内の要素を静的フッターで邪魔にならないようにする方法は?

Question

この場合、静的フッターと div のようなボタン (常に下部にある) 内の要素を作成しました。div の高さを大きくすることはできましたが、要素内の要素をdiv が増加し、消費されました。それを動的に作成するための他の提案はありますか?ありがとう。

サンプル出力は次のようになります。

Answer 1

静的とは、ウィンドウの下部にある固定位置を意味しますか? その場合、高さ (20px など) が何であれ、メイン領域の下部パディングの値を作成すると、メイン領域のすべてがフッターの高さによって等しくパディングされ、表示されます。

Answer 2

これは、JSFiddle での作業モデルです。

HTMLには、次のような「ラッパー」と「フッター」の 2 つの div があります。

<div id="wrapper">
    line 1 <br />
</div>
<div id="footer">
    footer text
</div>

CSSで:

html, body {
    height: 95%;
}

#wrapper {
    min-height: 100%;
    margin-bottom: -1.5em;
    padding-bottom: 1em;
}

#footer {
    position: absolute; !important
    bottom: 0;
}