Création de site internet, développement open source, formations

Gérer la hauteur des iframes avec jquery

Soumis par webapart le ven, 25/02/2011 - 11:40

Introduction

Rien de tel qu'ajouter une iframe à votre page pour tomber sur des problèmes insolubles...

Voyons quelques astuces qui permettent de se simplifier la vie.

Mon iframe doit prendre 100% de l'écran

Après avoir essayer <iframe height="100%"... , force est de constater que c'est un échec cuisant. L'astuce est de donner en css à tous les parents la hauteur de 100% :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<style type="text/css">
body, html, div, iframe {
    margin:0;
    padding:0;
    height:100%;       
}
</style>
</head>
<body>
<div id="main"><iframe class="fond" width="100%" height="100%" src="monurl"></iframe></div>
</body>

Oh joie, ça fonctionne, et juste avec les css encore...

Mon iframe foit prendre 100% de l'espace visible restant

Là on a besoin d'utiliser jquery (enfin, javascript surtout).

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<style type="text/css">
body, html, div, iframe {
    margin:0;
    padding:0;
    height:100%;       
}
<script type="text/javascript" src="js/jquery-1.5.1.min.js"></script>   
    <script type="text/javascript">
   
    $('document').ready(function(){

        var height = $('body').height() - $('#main').get(0).offsetTop;
        $('#main').css('height', height+'px');
        $('#main').height(height);
       
    });
</script>
</head>
<body>
<div id="main"><iframe class="fond" width="100%" height="100%" src="monurl"></iframe></div>
</body>

Et voilate, le tour est joué.

© 2010 Web à part -