Internet Explorer 7 iframe, высота 100% - PullRequest
Новая
       12

Internet Explorer 7 iframe, высота 100%

2 голосов
/ 06 декабря 2011

На странице у меня есть один iframe, в который я буду загружать различные вещи (некоторые js, Java-апплет).Я хотел бы установить его размеры так, чтобы он всегда соответствовал браузеру (100%, 100%) и был с возможностью прокрутки.К сожалению, 100% работает только для ширины, для высоты мое содержимое сжимается по вертикали, если я не устанавливаю значение в пикселях ... Я заморозил полосы прокрутки браузера, поскольку поведение в IE7 ужасно.

Как бы это исправить?Может быть, решение Javascript - это единственное решение? 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
            <style>
                body { 
                    overflow:hidden;
                    height:100%;
                    width:100%;
                    padding:0;
                    margin:0;
                }
                html {
                    height:100%;
                    width:100%;
                    padding:0;
                    margin:0;
                }
            </style>
</head>
<body onload="onLoad()" onunload="onUnload()">
    <iframe  name="contentFrame" width="100%" height="100%" id="contentFrame" src="..."></iframe>
</body>
</html>

Ответы [ 3 ]

4 голосов
/ 22 мая 2012

Самое простое исправление:

  1. Используйте html5 doctype, если это возможно:

  2. Установить 100% для всех родительских контейнеров:

    *, html, body { высота: 100%; ширина: 100%; Маржа: 0; обивка: 0; }

Я стараюсь избегать исправления Javascript для такого рода вещей, поскольку они просто проблемы с рендерингом и макетом.

0 голосов
/ 06 декабря 2011

Я нашел Javascript, который отлично работает для IE. Единственным недостатком является то, что вы можете видеть, как iframe сжимается на секунду, прежде чем он снова будет отображаться на экране. Называться onload и onresize. Я думаю, я мог бы добавить Jquery для этих двух событий. 

                function resizeIframe() {
                    var height = document.documentElement.clientHeight;
                    height -= document.getElementById('contentFrame').offsetTop;

                    // not sure how to get this dynamically
                    height -= 0; /* whatever you set your body bottom margin/padding to be */

                    document.getElementById('contentFrame').style.height = height +"px";
                };

                function composite_master_onLoad(){
                    composite_master_callAll('_onLoad');
                    window.moveTo(0, 0);
                    window.resizeTo(screen.availWidth, screen.availHeight);
                    resizeIframe();
                };
0 голосов
/ 06 декабря 2011

Проблема в том, что контейнер iframe не имеет высоты, а сам iframe, обозначенный именем, является встроенным (frame).

Это означает, что iframe не может «генерировать» высотусам по себе, поэтому вы должны установить высоту тегов <body> и <html> на 100% (также установите для их полей и отступов 0)

Или, используя js внутри iframe: 

function resizeIframe(iframeID) {
    if(self==parent) return false; /* Checks that page is in iframe. */
    else if(document.getElementById&&document.all) /* Sniffs for IE5+.*/

    var FramePageHeight = framePage.scrollHeight + 10; /* framePage
    is the ID of the framed page's BODY tag. The added 10 pixels prevent an
    unnecessary scrollbar. */

    parent.document.getElementById(iframeID).style.height=FramePageHeight;
    /* "iframeID" is the ID of the inline frame in the parent page. */
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...