IFrame не расширяется до 100% высоты

У меня это ниже html. И я бы хотел, чтобы iFrame покрывал остальную часть экрана 100% от того, что осталось. Я пробовал атрибуты "100%" и "*" по высоте, но не работал. Почему это? Благодаря

<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    </head>
    <body>
        <div id="container-frame">
            <img id="if-logo" height="35" width="84" alt="Kucku" src="/Content/Images/logo.gif"/>
            <img id="if-avatar" height="30" width="30" alt="Avatar" src="http://web.kucku.vn/Content/Images/Avatars/default_profile_bigger.png"/>
            <a id="if-username" href="/nvthoai">nvthoai</a>
            <div id="if-box">
            </div>
            <a id="if-close" href="#" onclick="location.href='http://www.yahoo.com'; return false;" target="_top"> </a>
            <div id="if-link">
            </div>
            <div id="if-star">
            </div>
        </div>
        <iframe id="mainFrame" frameborder="no" width="100%" title="mainFrame" framespacing="0" border="0" name="mainFrame" src="http://www.yahoo.com" style="display: block; width: 100%; float: left; height: 100%;">
            <html xmlns="http://www.w3.org/1999/xhtml">
            </html>
        </iframe>
    </body>
</html>



#container-frame {
background:#E1E1E1 url(../images/if_bg.gif) repeat-x scroll 0 0;
height:35px;
width:100%;
}

Ответ 1

Высота причины: 100% не работает, потому что высота% не работает для детей, у родителей которых нет явной (не%) высоты. Так что это не работает:

parent {
  height: 60%;
}

child {
  height: 100%;
}

в то время как это делает:

parent {
  height: 60em;
}

child {
  height: 100%;
}

Ребенок не знает, что означает 60%, поэтому вместо него он становится высотой: auto (высота определяется статическим содержимым внутри него).

Ребенок знает, как определить% от 60em или любой другой явной единицы.

Есть некоторые исключения из этого правила. Один из них, когда и html, и элементы тела заданы высотой: 100%, вы можете использовать высоту: 100% или минимальную высоту: 100% для прямого ребенка. (Вы можете попробовать высоту: 96%, как предположил Пэт, но знаете, что это будут совершенно разные значения для экрана/высоты браузера. При неожиданных размерах вы можете потерять контент.)

Если я неправильно читаю HTML, похоже, что у вас есть два прямых дочерних элемента: iframe и # container-frame.

Вы можете попробовать абсолютно позиционировать # контейнер-фрейм в верхней части окна просмотра (чтобы он мог сидеть над остальной частью страницы, а под "выше" я имел в виду "ближе к пользователю по оси z" ) и если iframe не установлен на 100% выше, но, возможно, как пример Pat, 96% или что-то в этом роде, тогда вы могли бы дать iframe некоторое верхнее дополнение, чтобы сделать визуальную комнату для # контейнера-кадра. Если вы этого не сделаете, верхняя часть iframe будет закрыта # контейнером-рамкой, и люди потеряют верх. Знайте, что вы не можете добавлять верхние или нижние поля, отступы, границы и т.д. В коробку высотой 100%. Это даст вам что-то более 100%!

Другое исключение из правила% height - это абсолютно позиционированные элементы в целом. Они могут иметь и% высоты, за исключением того, что IE6 имеет проблемы с этим. Таким образом, возможно позитивное позиционирование обоих прямых детей может работать, если вы не против взлома IE6 или не заботитесь о IE6. Как правило, мне не нравится позиционировать все на странице, но это может быть проще всего в таком случае.

Ответ 2

Этот CSS будет делать трюк для вас:

body {
  margin: 0;
  padding: 0;
  overflow-y: hidden;
}

Затем установите высоту iframe на 96%. Это остановит его от толчка от нижней части страницы.

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

Ответ 3

Вы можете просто попробовать <object> вместо <iframe>

Пример:

<object type='text/html' data="http://www.wikipedia.org/" style='width:100%; height:100%'>

Обратите внимание, что большинство людей рекомендуют не использовать какой-либо фреймворк (используя объект или iframe) в целях безопасности.

Обновить

Я забыл! Также может быть способ настроить iFrame динамически, используя функцию javascript, которая запускается после загрузки тела. Здесь есть очень хороший пример здесь.