JS - высота iframe со 100% и без прокрутки (Scroll-y в теле) - PullRequest
Новая
       8

JS - высота iframe со 100% и без прокрутки (Scroll-y в теле)

7 голосов
/ 11 мая 2011

У меня проблема с iframe.во-первых, я ищу ключевое слово iframe height в https://stackoverflow.com/search?tab=relevance&q=iframe%20height, но я не нашел нужного мне человека.

Как создать высоту iframe со 100% без прокрутки.Прокрутка в теле.

<body style="scroll-x:hidden;scroll-y:auto;">
<iframe frameborder="0" id="iframe" scrolling="no" src="http://www.google.com" style="width:960px;height:100%" height="100%" width="960"></iframe>

И если я найду что-нибудь через http://www.google.com в iframe, после перехожу на страницу результатов поиска Google.iframe рассчитает новую высоту и все еще с высотой iframe 100%, полосой прокрутки в части тела.(Хотелось бы, чтобы какая-то помощь отлично работала не только в ie и firefox, но также в safari и chrome).Большое спасибо.

Ответы [ 3 ]

5 голосов
/ 11 мая 2011

Это должно сделать то, что вы ищете: 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Page Title</title>

    <style type="text/css" media="screen">

        body,
        html {
            width: 100%;
            height: 100%;
            overflow: hidden;
        }

        * {
            padding: 0;
            margin: 0;
        }

        iframe {
            width: 960px;
            height: 100%;
            overflow: hidden;
            border: none;
        }
    </style>

</head>
<body>

    <iframe src="http://google.com" scrolling="no"></iframe>

</body>
</html>

Ключи здесь:

  • Сделайте элементы BODY и HTML 100% окна браузера, поэтому, когда вы делаете iFrame 100%, он имеет значение, равное 100%.
  • Установить элементы BODY и HTML на переполнение: скрыто, чтобы полосы прокрутки не отображались
  • Убедитесь, что нет отступов

Надеюсь, это поможет

2 голосов
/ 16 июля 2013

Используйте мой плагин JQuery: 

 $.fn.resizeiframe=function(){
    $(this).load(function() {
        $(this).height( $(this).contents().find("body").height() );
    });
    $(this).click(function() {
        $(this).height( $(this).contents().find("body").height() );
    });

}

затем используйте его следующим образом: 

$('iframe').resizeiframe();

Не забудьте настроить атрибуты iframe следующим образом: 

<iframe
   src="islem.html"
   frameborder="0"
   width="100%"
   marginheight="0"
   marginwidth="0"
   scrolling="no"
></iframe>
1 голос
/ 17 апреля 2013

Я искал тот же эффект и нашел способ. Если вы посмотрите «проверить элемент» в Chrome (или firebug) в разделе метрик, то выберите <html>. Вы должны увидеть, если область HTML меньше, чем весь документ. Если вы установите HTML на высоте 300%, он должен работать. Вот важные особенности: 

html {height:300%;
}
body {height:100%;
}
#frame {height:90.74074074074074%;}

*** следите за любой максимальной высотой, которую вы, возможно, закодировали, это бы испортило эффект.

В моем случае мне пришлось разделить высоту кадра другим элементом в моем контейнере, чтобы он мог полностью растягиваться без появления полос прокрутки. Поэтому мне пришлось рассчитать% высоты, оставшейся в моем контейнере, используя firebug.

------- Другой способ, проще:

Попробуйте не указывать высоту ОБА ваших HTML-документов, 

html, body {}

, тогда только кодируйте это: 

#some-div {height:100%;}
#iframe {height:300%;}

примечание: div должен быть вашим основным разделом.

Это должно работать относительно. iframe точно вычисляет 300% высоты видимого окна. Если html-контент из 2-го документа (в iframe) меньше по высоте, чем в 3 раза больше высоты браузера, он будет работать. Если вам не нужно часто добавлять контент в этот документ, это постоянное решение, и вы можете просто найти свой собственный необходимый% в зависимости от высоты вашего контента.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...