Получить Iframe, чтобы заполнить до нижней части страницы

Question

Кажется, это должен быть простой вопрос, но я не могу найти решение где-либо.

На веб-сайте, который я делаю, у меня есть панель навигации вверху страницы, высота которой составляет 43 пикселя.и в попытке не редактировать ее для каждой отдельной страницы, которую я делаю, я поместил ниже фрейма под ним ширину 100%, при этом кнопки навигации нацелены на источник моего фрейма.

Теперь где япроблема в том, что я хочу, чтобы iframe простирался от нижней части навигационной панели до нижней части страницы, чтобы вы не могли сказать, что он был встроен, но если я установил высоту на 100%, он будет установлен на высотувсей страницы и добавляет вторую полосу прокрутки, чтобы компенсировать лишние 43 пикселя внизу, так как же я могу разместить iframe под оставшееся место под панелью навигации?

Я попытался установить разные%, но это не работает для разных мониторов разрешения.И мне это нужно для работы в разных браузерах (в IE, Chrome, Safari и Mozilla, желательно в Opera, но это не обязательно).

Извините, немного словесно, кто-нибудь может помочь?

Answer 1

Довольно просто. Все, что вам нужно сделать, это вычесть высоту вашей навигации из текущей высоты области просмотра и установить ее как высоту вашего фрейма. Используйте этот метод Javascript:

function ResizeIFrame() {
    var nNavigationHeight = 43; // Assuming the 43px you stated above
    var nViewHeight = document.body.clientHeight;
    var nIframeHeight = nViewHeight - nNavigationHeight;
    document.getElementById("YourIFrameID").style.height = nIframeHeight + "px";
}

Вам нужно будет установить ваше тело и HTML на 100% высоты, чтобы это работало.

body, html {
    height: 100%;
}

Я должен упомянуть, что это несколько сомнительный способ достижения того, что вы хотите сделать, но это решение, верное букве вашего вопроса. Я бы порекомендовал вам использовать Jquery, а не ванильный Javascript, поскольку кросс-браузерные головные боли будут сведены к минимуму (этот код я проверял в своих текущих установках IE 7 & 8, FF, Chrome и Safari без проблем, но ваш пробег может различаться). Если вы решите пойти по этому пути, было бы лучше воспользоваться их превосходной и простой функциональностью AJAX, используя div, и полностью отказаться от iframe.