2015-06-08 2 views
0

Я пытаюсь настроить мой iframe с помощью одной полосы прокрутки и автоматической высоты iframe, но я не знаю, как это сделать. Как я могу это сделать?. Код здесьКак я могу настроить мой iframe

<style type="text/css"> 
 
html { 
 
\t height: 100%; 
 
} 
 
body { 
 
\t height: 100%; 
 
\t margin: 0px; 
 
\t padding: 0px; 
 
} 
 

 
</style> 
 

 
<body> 
 

 
<iframe src='http://www.dohop.com/widget/2/?forms=flights&target=&tabs=top&orientation=horizontal&border_color=808080&text_color=202020&background_color=D0D0D0&form_border_color=808080&form_text_color=000&form_background_color=FAFAFA&width=1000&flang=es&whitelabel=http://vuelos.gangatravel.es/' scrolling='yes' width='1000' height='250' frameborder='0' style='border:none; overflow: hidden;' allowtransparency='true'> 
 
</iframe> 
 
<div style='text-align: right; width: 1000px; display:block; margin-top:5px;'> 
 
\t <a href='http://www.dohop.com' style='font-size:10px;text-decoration:none;color:#007BA4;'></a> 
 
</div>

+0

Вам нужна вертикальная полоса прокрутки и авто высота в то же время ??? – dsaket

+0

yess, но только основная вертикальная полоса прокрутки –

+0

главная вертикальная полоса прокрутки и авто высота, например, если результаты поиска - 50 полетов, высота должна быть «500 пикселей», если поиск результатов равен 100, высота должна быть «1000 пикселей», но автоматически (автоматическая высота без пикселов) –

ответ

1

Вы можете просто позволить iframe принимать всю ширину и скрыть body переполнения. Для этого измените HTML к следующему,

<body> 

<iframe src='http://www.dohop.com/widget/2/?forms=flights&target=&tabs=top&orientation=horizontal&border_color=808080&text_color=202020&background_color=D0D0D0&form_border_color=808080&form_text_color=000&form_background_color=FAFAFA&width=1000&flang=es&whitelabel=http://vuelos.gangatravel.es/' scrolling='yes' frameborder='0' style='border:none;' allowtransparency='true'> 
</iframe> 
<div style='text-align: right; width: 1000px; display:block; margin-top:5px;'> 
    <a href='http://www.dohop.com' style='font-size:10px;text-decoration:none;color:#007BA4;'></a> 
</div> 

</body> 

И используйте следующий CSS,

iframe{ 
     min-width:100px; 
     width:100%; 
     height:100%; 
    } 
    body{ 
     overflow:hidden; 
     height: 100%; 
     margin: 0px; 
     padding: 0px; 
    } 
    html { 
     height: 100%; 
    } 
1

добавив следующую строку в головной части кода может решить проблему

<script language="javascript" type="text/javascript"> 
function resizeIframe(obj) { 
    obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px'; 
    } 
</script> 

добавьте это как atttribute в элемент iframe

onload='javascript:resizeIframe(this);' 
Смежные вопросы