在瀏覽器調整大小時調整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');
    });
});