html - ボトムバー - すべての位置オプションは特別な問題を引き起こします

Question

すべてのページに下部バーがあります。

今ではCSSがあります：

#bottom_nav {
    position: absolute;
    bottom: 0;
    left: 0;
    border-top-style: solid;
    border-color: #f7f7fe;
    background: url('http://localhost:3000/assets/font-try.jpg');
    height: 70px;
    width: 100%;
    font-family: "ProximaNova", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 15px;
    font-weight: 400;


}

ただし、position: absolute;ドキュメントの高さがウィンドウの高さよりも大きい場合は、ページ コンテンツの上に移動します。

position: relative;他の関連要素がある場合、ページが間違ってレンダリングされます。

position: fixed;-絶対と同じ結果。

通常margin-top、ドキュメントの高さが小さい場合は、ページの中央に配置できます。

現時点ではJSスクリプトで修正しましたが、より良いアプローチがあると確信しています.通常、ボトムバーはどのように設定されていますか?