在浏览器中调整大小调整大小 [英] Resize div on browser resize

问题描述

我有一个< div> ，我想显示全屏，但我还需要加入 60px 高< div> 和 10px 高< div> 在文档的顶部。主div的大小需要重新调整大小，因为浏览器窗口的大小可以保持全屏。

I have a <div> which I want to display full screen, but I also need to incorporate a 60px high <div> and a 10px high <div> at the top of the document. The size of the main div will need to re-size as the browser window is re-sized to keep it full screen.

<div id="div1" style="height: 60px">

</div>

<div id="div2" style="height: 10px">

</div>

<div id="fullscreen">

</div>

所以：

code>文档大小 - （＃div1 +＃div2）

fullscreen height = document size - (#div1 + #div2)

重定大小时重新计算上述值。

On re-size recalculate the above value.

推荐答案

在某些情况下，通过HTML和CSS来实现这一点的方法是将绝对定位的div与顶部设置为 70px ，每隔一个方向设置为 0px 。

One way to achieve this in some cases via just HTML and CSS is to have absolutely positioned div with it's top set to the 70px and every other direction set to 0px. Then every other side will adjust itself to the edges of the browser window.

例如：

<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>

这篇关于在浏览器中调整大小调整大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！