28106 sujets

CSS et mise en forme, CSS3

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'! Smiley cligne
Modifié par PapyJP (01 Feb 2015 - 20:24)
Hmm!
Plus d'une centaine de lectures à cette heure et personne ne me propose de réponse du genre "mais c'est très simple, yaka...."
Je n'ai même pas eu la remarque que j'attendais sur le fait que des iframes c'est ringue, et qu'en mettant une div bien paramétrée ça serait plus modjerne.
Alors simplifions: si je supprime mon iframe et me contente de faire de "container" un rectangle bleu allant jusqu'à 20px du bas de la page, comment je fais?
#container {border: 1px solid blue; /* et après ???*/}
Salut

comme indiqué dans le tuto, il te faut appliquer sur ta div container ou ta frame une hauteur minimum via la propriété min-height.
Je te suggère d'utiliser la propriété css calc(); pour calculer tes hauteurs entre des unités en % et des unités en px.

Imaginons que ton container est à 50px du haut de ta fenêtre et qu'il descende au minimum à 20px du bas de ta fenêtre. Il suffira de lui appliquer la hauteur suivante via css :
#container { min-height:calc(100% - 70px); }

A condition que tu appliques un height:100% à tes balises html et body.
Merci Pedrothelion

Ça marche effectivement pour une div mais ça n'a pas l'air de marcher pour une iframe, du moins sous FireFox.
Je garde mon Javascript jusqu'à plus d'info sur ce sujet.