jquery - 在浏览器调整大小时调整 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>