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');
    });
});

在浏览器调整大小时调整div大小

2 个答案: