Stéphanie W. a écrit :
Bonjour,
Tu as regardé sur ce tuto http://www.alsacreations.com/astuce/lire/51-hauteur-100-element.html ?
Bonjour
Justement, je ne comprends pas très bien comment appliquer ce tuto à la page suivante: http://polyphonies.idf.free.fr/
La structure est relativement simple:
<body onload="resize();">
<header>
<img id="logo" src="/images/Logo.png" alt="logo" onclick="document.location = '/';"/>
<div style="tex-align:center;color:red;font-size:1.2em;font-weight:bold;">Site en cours de construction</div>
</header>
<nav> <!-- futur menu à développer -->
<div id="menubox">
<div class="menu">Présentation</div>
<div class="menu">menu2</div>
<div class="menu">menu3</div>
<div class="menu">menu4</div>
<div class="menu">Notre site</div>
</div>
</nav>
<section id="container">
<iframe id="content" src="http://polyphonies.idf.free.fr/html/accueil.php"> </iframe>
</section>
</body>
avec le CSS:
html {height:100%;width:100%;}
body {height:100%;width:100%;margin:0;padding:0;
font-family:"Myriad Pro", "Trebuchet MS", Arial, Geneva, sans-serif;background:white;}
header {width:100%;height;100px;text-align:center;}
nav {position:relative;}
#logo{cursor:pointer;}
#menubox{position:absolute;text-align:center;width:100%;}
.menu{display:inline-block;text-align:center;white-space: nowrap;padding:4px 10px;}
#container {}
#content {display:block;width:90%;margin:50px auto 0;min-height:500px;}
et Javascript
function resizeAction() {
var body = document.getElementsByTagName('body')[0], bodyRect = new Rectangle(body);
var content = $('content'), contentRect = new Rectangle(content);
var src = content.src;
content.src = 'about:blank';
content.style.height = (bodyRect.height - contentRect.top - 20) + 'px';
if(src == '') src = '/html/accueil.php';
content.src = src;
}
Rectangle est une classe d'objet définie dans ma boîte à outils JS qui donne les intos de positionnement d'un élément: top, left, width, height, bottom, right en px
L'appel à la fonction "resizeAction()" lors du chargement de la page a uniquement pour but de calculer la hauteur de #content. Elle est également appelée par l'évènement "resize", avec une tempo pour éviter les cascades d'événements.
Quelqu'un pourrait il me dire comment avoir une iframe dont la hauteur prenne la taille désirée (du point courant au bas de la page - 20px) sans passer par cette bidouille?
@stéphanieW: bingo! Ça marche, même avec un iPad'!
Modifié par PapyJP (01 Feb 2015 - 20:24)