ページの下部にあるデータを固定divの下に隠さないように保護しますか？

Question

私はレスポンスウェブサイトで作業しています。 私はページ上にたくさんのデータを持っており、ページの一番下には固定divがあります。このdivのデータは、いくつかの時間が2行あり、時々変化する可能性があります。

ページの下部にあるデータを固定divの下に隠さないようにするには、ページの最後に空きスペースが必要ですか？

ここにコードがあります。

<style> 
    .screen-bottom-fixed { 
     position: fixed; 
     bottom: 0; 
     right: 0; 
     left: 0; 
     background-color:aqua; 
     padding-top: 8px; 
    } 
    .section-1 { 
     text-align: center; 
     background-color: red; 
    } 
    .section-2 { 
     text-align: center; 
     background-color:chartreuse; 
    } 
</style> 

<div class="page"> 
    <div class="1"> 
     about 200 lines of text here..... 
    </div> 
    <div class="screen-bottom-fixed"> 
     <div class="section-1"> 
      We have some lines of dynamic date here 11111..... 
     </div> 
     <div class="section-2"> 
      We have some more dynamic date here 22222....... 
     </div> 
    </div> 
</div> 

はまた、画面の下部に固定されたデータを持っている私には良いアプローチを提案し、ページ上のデータは、divの下に隠されているから安全です。

Answer 1

私はあなたが質問のタグにjsを追加していないことを知っていますが、jsはこの状況で私の頭に来るものです。

まず、あなたは高さ

$('.separator').height($('.screen-bottom-fixed').height()); 

また、ウィンドウ上でそれを再計算することができ、それを制御することができますJSでイベント

のサイズを変更 画面ボトム固定ブロック

<div class="separator"><!-- empty block --></div> 

前に空のブロックを追加します

$(window).on('resize', function(){ 
    $('.separator').height($('.screen-bottom-fixed').height()); 
}); 

ここにはjsFiddle