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