Iframe / CSS: принудительное использование Iframe для экрана

Question

В настоящее время я пытаюсь, чтобы iframe соответствовал размеру моего экрана, и любой другой пользователь использует его в разных разрешениях, кроме того, что бы я ни пытался, у меня либо будет слишком маленький iframe, либо высота слишком большой, вызывая двойную полосу прокрутки. (Iframe и сама страница имеют полосы прокрутки).

Моя цель состоит в том, чтобы iframe занимал только 85% ширины страницы (что работает!), 100px от верхней части экрана (также работает), а затем чтобы нижняя часть соответствовала краю нижней части моего браузера. (вот где я застрял ...)

HTML

<div id="maindiv" class="maindiv">
<iframe id="theiframe" class="iframeautowidth" seamless src="http://whateverdomain.com></iframe>
</div>

CSS:

.maindiv {
width: 85%; 
top: 100px;
}

.iframeautowidth {
left: 0px;
top: 0px;
bottom: 0px;
width: 85%;
height: 100%;
border: 0
overflow: hidden;
display: block;
margin: 0;
float: left;
}

Если это что-то значит, на моей странице будет запущен последний jquery, если это поможет. Заранее спасибо!

Answer 1

Используйте событие onload() вашего iframe и событие onresize() окна, чтобы изменить размер iframe до необходимого размера.

Эта статья службы поддержки Microsoft объясняет это хорошо.

К вашему сведению, в javascript screen.width & screen.height даст вам разрешение экрана.

Answer 2

Если верх в 100px предназначен для вкладок, перемещающихся по iframe, возможно, существует обходной путь. Просто заполните свой iframe до 100% высоты и затем поместите эти вкладки внутри iframe как другой iframe с фиксированным размером. Или просто прибегнуть к фрейм-сетам.

Работает ли это для вас или нет, зависит от вашего точного замысла, но надеюсь, что это поможет.

Answer 3

Если бы у вас был Fx4, простой height: -moz-calc(100%-100px) сработал бы чудо. Жаль, что эта функция введена и поддерживается так поздно в CSS3.