РАМКА и противоречивые абсолютные позиции - PullRequest
Новая
       8

РАМКА и противоречивые абсолютные позиции

21 голосов
/ 20 октября 2010

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

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

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

В хороших браузерах я мог бы обернуть IFRAME вDIV с цитируемым стилем CSS и установите высоту и ширину рамки в 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, он не будет иметь правильный размер.

Ответы [ 5 ]

22 голосов
/ 30 сентября 2011

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

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

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

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

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

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

Редактировать Некоторое дополнительное объяснение

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

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

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

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

5 голосов
/ 30 сентября 2011

Почему вы не используете высоту и ширину?Вы все равно получите абсолютную позицию, установив top / bottom & left / right, как в примере ниже. 

<!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).

2 голосов
/ 20 октября 2010 
html,body {
    margin:0;
    padding:0;
    height:100%;
    min-height:100%;
}
#myiframe {
    width:100%;
    height:100%;
    border:0;
}

у меня нормально работает даже с IE7.

0 голосов
/ 27 ноября 2014

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

document.getElementsByTagName('iframe')[1].style.borderWidth = '0px';
document.getElementsByTagName('iframe')[1].style.backgroundColor = 'green';
0 голосов
/ 20 октября 2010

Я бы сказал, посмотрите на этот вопрос переполнения стека. Это может помочь:

Сделать Iframe, чтобы соответствовать 100% оставшейся высоты контейнера

...