在浏览器中调整大小调整大小

本文介绍了在浏览器中调整大小调整大小的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有一个< 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>

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

Div