2014-02-16 2 views
4

Здравствуйте, я не могу заставить IFRAME работать. Я хочу, чтобы его высота соответствовала всей области содержимого. Когда я добавляю высоту 100%, он не подходит для всей области и подходит только к 3/4 области содержимого. Вот мой код:IFRAME Fit весь контент нет полосы прокрутки

<iframe src="some.html" frameborder="0" style="overflow:hidden; display:block; height:100%; width:100%" height="100%" width="100%"> 
<p style="">Your browser does not support iframes.</p> 

Как я могу поместиться все содержимое на моем IFRAME?

ответ

1

Добавить body,html{ height: 100% } в ваш css, должен исправить вашу проблему. Это предполагает, что тег body является вашим родителем. Эта скрипка может помочь вам немного - http://jsfiddle.net/8qALc/

7

Используйте это в своем коде, ваша проблема заключалась в том, что он должен был быть установлен на position: absolute, иначе он просто даст вам необходимую ширину и высоту.

<body style="margin: 0 auto;"> 
     <iframe src="some.html" frameborder="0" 
     style="overflow:hidden; 
     display:block; position: absolute; height: 100%; width: 100%"> 
<p style=""> 
     Your browser does not support iframes. 
</p> 
</body> 
0

Оба ответа совершенно правильные, но есть некоторые недостатки. Вместо этого, это должно работать в любом современном браузере *:

<style> 
/* Unless you use normalizer or some other CSS reset, 
you need to set all these properties. */ 
body,html{ height: 100%; margin:0; padding:0; overflow:hidden; } 
</style> 

<!-- 
* frameborder is obsolete in HTML5. 
* in HTMl5 height and width properties are set in pixels only. 
Nonetheless, there is no need to set these values twice. 
* scroll bars should be dictated by the embedded content, 
so to avoid double scroll bars, overflow is moved to the html,body tags. 
There is a new attribute named seamless that allows the inline frame to 
appear as though it is being rendered as part of the containing document, 
so no borders and scrollbars will appear. 
Unfortunately this is not supported by browsers yet. 
--> 
<iframe src="some.html" style="position:relative; border:0; height:100%; width:100%;"> 
<p>Your browser does not support iframes.</p> 

See demo

См seamless свойство browser compatibility.

* Для поддержки HTML4 добавьте их в iframe: frameborder="0" height="100%" width="100%"

Смежные вопросы