調整大小DIV調整

Question

我有一個<div>我想全屏顯示，但我也需要在文檔的頂部摻入60px高<div>和10px高<div>。當瀏覽器窗口重新調整大小以保持全屏時，主div的大小將需要重新調整大小。

<div id="div1" style="height: 60px"> 

</div> 

<div id="div2" style="height: 10px"> 

</div> 

<div id="fullscreen"> 

</div> 

所以：

全屏高度= document size - (#div1 + #div2)

在重新大小重新計算上述值。

Answer 1

一種方式通過只是HTML和CSS某些情況下，實現這一目標是有絕對定位的div與它的頂部設置爲70px和每隔一個方向設置爲0px。然後，每一方都會自行調整到瀏覽器窗口的邊緣。

例如：

<style type="text/css"> 
#fullscreen { 
    background-color: #0000FF; 
    position: absolute; 
    top: 70px; 
    left: 0px; 
    right: 0px; 
    bottom: 0px; 
} 
</style> 

<div id="fullscreen">The Full Screen</div> 

Answer 2

試試這個：

$(window).resize(function(){ 
    $('#fullscreen').height($(document).height() - ($('#div1').height() + $('#div2').height()) + 'px'); 
}); 

更新基於評論：

我在上面的代碼中使用jQuery，你必須下載並首先將其包含在你的頁面。

一旦你已經下載幷包含在您的網頁，然後使用此代碼：

$(function(){ 
    $(window).resize(function(){ 
     $('#fullscreen').height($(document).height() - ($('#div1').height() + $('#div2').height()) + 'px'); 
    }); 
});