css - デバイスの高さが異なるとフッターが正しく表示されない

Question

フッターに問題があります。一部のコンテンツを含むページがあり、一部のデバイス (モバイルなど - ズームアウト ビュー) では、一部のデバイスではページのコンテンツが親デバイスの高さを埋めません。フッターは、これらの異なる高さで問題を引き起こしています。コンテンツが親デバイスの高さを満たさない場合、フッターはページの下部に正しく表示されますが、コンテンツが親デバイスの高さを埋めてオーバーフローすると、フッターがコンテンツの上に表示されます。

親の高さを埋めていないコンテンツを含むフッター (正しく表示されます)

オーバーフローしたコンテンツを含むフッター (正しく表示されない)

画質はそれほど明確ではありませんが、問題ははっきりと見えます。

これは私が今まで使ってきたCSSコードです。

#footer{
     display:block;
     margin-right:auto;
     margin-left:auto;
     position:absolute;
     bottom:0;
     height:100px;
     width: 60%;
     text-align:center;
     color:green;
     font-size:18px;
     font-family:Times;
 }

これはどのように修正できますか？コンテンツがオーバーフローしたときにページの最後にフッターを表示したい。