Изменить размер div в браузере

Question

У меня есть <div>, который я хочу отобразить в полноэкранном режиме, но мне также нужно добавить 60px high <div> и 10px high <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');
    });
});