奇妙なフッターの振る舞い

Question

私はCSSには比較的新しいので、奇妙なギャッファーのために私を許してください。私は絶対的な位置をとるためにフッタを定義し、私のウェブサイトの1ページを除くすべてのページの下部にとどまっています。

...>ここのフッターは完全に動作します。つまり、コンテンツの内容に関係なく画面の下部に貼り付けられます。

...>ただし、下のフッターは異常な動作をしますが、ページの下端に位置が貼り付けられていません。

私は両方のページで同じフッタクラスを使用していますので、私は下記の、ここで間違っているかわからないんだけど - それから、私は位置を変更した場合、固定にすることを

.shell3-Footer { 
box-sizing: border-box; 
padding: 0.9375rem; 
border-top: 0.0625rem solid #dcdcdc; 
overflow: hidden; 
max-height:40px; 
width:100%; 
background-color:#f5f5f5; 
position:absolute; } 

注意、私がページの一番下までスクロールするときにだけフッターが表示される必要があるので、問題は部分的に解決されています。また、position:fixedが使用されている場合、スクロールバーの下矢印を表示できません。希望の動作ではありません。

さらに、エラーのあるフッターの下にわずかな空白があり、それにbottom:0pxを追加して修正しました。

同じフッタークラスが2ページで異なる動作をする理由を教えてもらえますか？思考？ footerでこれらのルールは、これらが役立つかもしれ

Answer 1

使用....

.shell3-Footer { 
    box-sizing: border-box; 
    padding: 0.9375rem; 
    border-top: 0.0625rem solid #dcdcdc; 
    overflow: hidden; 
    max-height:40px; 
    width:100%; 
    background-color:#f5f5f5; 
    position:absolute; 
    bottom: 0px !important; left: 0px !important; z-index: 10000 !important; /*added rule*/ 
} 

Answer 2

はこれを試してみてください：

body { 
    display: flex; 
    flex-direction: column; 
    height: 100vh; 
} 

/* Put this class on everything that is not the footer */ 
.content { 
    flex: 1 0 auto; 
} 

.shell3-Footer { 
    flex-shrink: 0; /* new stuff */ 
    width:100%; 
    background-color:#f5f5f5; 
    box-sizing: border-box; 
    padding: 0.9375rem; 
    border-top: 0.0625rem solid #dcdcdc; 
    overflow: hidden; 
}