调整大小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'); 
    }); 
});