В javascript, jQuery или css как мне получить div или iframe для расширения, чтобы заполнить оставшееся пространство

Question

У меня есть три iframe, и я устанавливаю верхний iframe на высоту 50px, и я устанавливаю нижний iframe на 50px, но я хочу, чтобы средний iframe расширялся, чтобы заполнить остальное пространство.Есть ли техника, которую я могу использовать, чтобы сделать это для экрана любого размера?спасибо.

пример:

<iframe style="width:100%; height:50px;" src="headerstuff.asp" %></iframe>
<iframe style="width:100%; height:100%;" src="Content.asp" %></iframe>  <!-- height needs to fill -->
<iframe style="width:100%; height:50px;" src="footerstuff.asp" %></iframe>

Answer 1

Для дивов это довольно просто. Я не уверен, будет ли это работать для iframes, но заголовок вашего вопроса указывает, что divs достаточно:

<div style='background:red; position:absolute; top:0; left:0; right:0; height:50px;'></div>
<div style='background:green; position:absolute; top:50px; left:0; right:0; bottom:50px;'></div>
<div style='background:blue; position:absolute; bottom:0; left:0; right:0; height:50px;'></div>

Answer 2

<iframe id="i1" style="width:100%; height:50px;" src="headerstuff.asp" %></iframe>
<iframe id="i2" style="width:100%; height:100%;" src="Content.asp" %></iframe>  <!-- height needs to fill -->
<iframe id="i3" style="width:100%; height:50px;" src="footerstuff.asp" %></iframe>

var res, ires,n1,n2,h;
n1 = $('#i1').height(); 
n2 =$('#i3').height();
h= $(window).height();
ires = n1+n2;
res = h-ires;

$('#i2').height(res);

Answer 3

Это может быть ответом на ваш вопрос:

Сначала установите атрибуты IFRAME HEIGHT и WIDTH на «100%».

Internet Explorer 6.0 позволяет указать% для высоты и ширина рамки. Если вы установите их на 100%, это скажет браузеру увеличить размер рамки, чтобы соответствовать размеру Непосредственный родительский контейнер IFRAME; обычно это ячейка таблицы внутри. (Использование меньших чисел% часто не очень полезно, потому что размер оставшегося пробела меняется, что может выглядеть странно пользователю при изменении размера окна.)

Однако установка HEIGHT = 100% часто заканчивается только IFRAME доля от полного размера окна, потому что браузер имеет уже определен размер тега ячейки, содержащей таблицу TD. Так трюк говорит браузеру сделать «родительский» содержащий ячейка таблицы и элемент таблицы растут, чтобы заполнить браузер. Это В отличие от базовых размеров таблиц в браузерах, которые пытаются уменьшить таблицы до минимального размера, необходимого для размещения их содержимого.

Взято с этого веб-сайта, найдено в Google .

Только для избыточности: установите ширину и высоту iframe равными 100% и сделайте так, чтобы вложенные контейнеры, div или ячейки таблицы соответствовали содержимому, как вы хотите. Ширина и высота элемента iframe указана относительно родительского контейнера.

Answer 4

Вы можете использовать $(window).height(); и $(window).width();, чтобы получить размеры окна просмотра браузера.Оттуда вы можете изменить размер в зависимости от вашего контента.

var middleFrameHeight = $(window).height() - $('iframe #header').height() - $('iframe #footer').height();
$('iframe #content').height(middleFrameHeight);

Answer 5

$('iframe').eq(1).height($(window).height()-100);

Извините.Я забыл обернуть window в объект jQuery.

Кроме того: этот код не предполагает границ, полей и т. Д. Из коробки, iframes получают их, поэтому вам нужно избавиться от них или взятьони учитываются при вычитании высоты других элементов iframe.