IFRAME и противоречивые абсолютные позиции

Я хотел бы иметь динамический размер IFRAME, используя следующий CSS:

#myiframe {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

Однако браузер не поддерживает это.

В хороших браузерах я мог бы обернуть IFRAME в DIV с помощью CSS-стиля и установить высоту и ширину IFRAME на 100%. Но это не работает в IE7. За исключением использования выражений CSS, кому-нибудь удалось это решить?

Обновление

MatTheCat ответил сценарием, который работает, если IFRAME находится непосредственно под телом, а теги body/html имеют высоту: 100%. В моем первоначальном вопросе я не указал, где был IFRAME, и какой стиль применял к нему контейнер. Надеюсь, следующие адреса:

<html>
    <body>
        <div id="container"><iframe id="myiframe"></iframe></div>
    </body>
</html>

и допустим следующий контейнер CSS:

#container {
    position: absolute;
    top: 10px;
    bottom: 10px;
    left: 10px;
    right: 10px;
}

если вы теперь поместите height: 100% в IFRAME, он не будет правильно изменен.

Ответы

Ответ 1

Используйте div для заполнения со всех сторон. Поместите iframe в него, используя 100% своего родительского div.

http://jsfiddle.net/sg3s/j8sbX/

Теперь вам нужно запомнить несколько вещей. Iframe изначально является встроенным фреймом, поэтому, в то время как современные браузеры не заботятся, установите display: block на нем. По умолчанию у него также есть граница. Любые stying, которые мы хотим сделать, должны быть сделаны в контейнере iframe или мы сломаем 100% -ную контейнерную границу.

И вот как мы бы поставили над ним элемент:

http://jsfiddle.net/sg3s/j8sbX/25/ (отредактируйте: мне плохо, вам действительно нужно установить border = 0 в iframe для IE7)

Должен отлично работать в IE7 + (IE6 не любит абсолютное позиционирование + с помощью верхнего/правого/нижнего/левого, чтобы дать ему макет)

Изменить Дополнительная информация

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

Думая об этом, мы можем фактически отказаться от абсолюта и блокировать. http://jsfiddle.net/sg3s/j8sbX/26/ Возможно, вам стоит дважды проверить IE7.

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

Попробуйте, добавив в мой пример более крупную границу (например, 3px) в iframe, вы можете легко увидеть, как она влияет на макет.

Ответ 2

Почему вы не используете высоту и ширину? Вы все равно получите абсолютное положение, установив верхний/нижний и левый/правый значения, как в приведенном ниже примере.

<!DOCTYPE HTML>
<html>
    <head>
        <style type="text/css">
            html, body {
                margin:0;
                padding:0;
                border:0px;
                height:100%;
                width:100%;
            }
            #container {
                position: absolute;
                top: 10px;
                bottom: 10px;
                left: 10px;
                right: 10px;
            }
            #myiframe {
                position: absolute;
                top: 0%;
                left: 0%;
                height: 100%;
                width: 100%;
            }
        </style>
    </head>
    <body>
        <div id="container"><iframe id="myiframe"></iframe></div>
    </body>
</html>

Это работает для меня (проверено на IE9).

Ответ 3

html,body {
    margin:0;
    padding:0;
    height:100%;
    min-height:100%;
}
#myiframe {
    width:100%;
    height:100%;
    border:0;
}

отлично работает для меня даже с IE7.

Ответ 5

Вы можете попытаться использовать это:

document.getElementsByTagName('iframe')[1].style.borderWidth = '0px';
document.getElementsByTagName('iframe')[1].style.backgroundColor = 'green';