保護頁面底部的數據不被隱藏在固定的div下面？

我正在響應網站上工作。我在頁面上有很多數據，頁面底部有一個固定的div，這個div中的數據是動態的，它有兩行，一些時間可能不同。保護頁面底部的數據不被隱藏在固定的div下面？

爲了保護頁面底部的數據不被隱藏在固定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下被隱藏的安全。

來源

2016-08-24 Syed

js解決方案如何？ – Kison

如果存在，我會更喜歡css解決方案，js解決方案也是受歡迎的。 – Syed

好吧，我已經添加了js解決方案 – Kison

我知道你沒有在問題中加入js標籤，但是在這種情況下，它是第一個出現在我頭上的問題。

首先前篩板固定塊

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

與JS

然後，你可以控制它的高度

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

您也可以重新計算它的窗口大小調整事件

添加空塊

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

這裏是jsFiddle

來源

2016-08-24 08:23:33 Kison

保護頁面底部的數據不被隱藏在固定的div下面？

回答

相關問題