5568 sujets

Sémantique web et HTML

Remplir le reste d'un conteneur

Bonjour à vous,

Ce sujet a dans un premier temps été la suite d'un sujet résolu (voir le ce post) donc je le remet en temps que nouveau sujet. Voici ma question :
jeanpylone a écrit :
En effet, je recherche à inserer dans un conteneur (de taille connue) un premier div de hauteur fixe (avec une largeur de 100% du conteneur) puis un deuxième qui couvrirait le reste de la hauteur du conteneur. Ici il n'est pas question que de couleur de fond et donc je ne peux pas forcément jongler avec les propriétés du conteneur pour le rendu.

J'ai bien essayé tout simplement de mettre le height du deuxième div a 100% ce qui a agrandi la taille de mon conteneur de la hauteur de mon premier div (ce que bien sûr j'aimerais éviter).

Je précise que les navigateurs cibles sont potentiellement des IE6 & IE7.


J'ai eu un début de réponse grâce à Raphael et à la FAQ,
Raphael a écrit :

EDIT : à vue d'oeil, la réponse à ta question se trouve dans l'Incontournable FAQ à parcourir avant toute question. Me trompe-je ?


J'ai réussi à faire ce que je voulais sous IE7 (le deuxième div en positionnement absolu avec un top à la taille de mon premier div et un bottom à 0). Malheureusement, pour IE6, le div n'a pas l'air de vouloir s'étendre plus que ça... étant assez novice dans IE6 et ses exceptions au CSS, je pense qu'il y aurait un "hack" mais je cherche toujours.

Merci en tout cas à toi Raphael pour ta réponse rapide Smiley cligne
Modifié par jeanpylone (26 Oct 2006 - 11:06)
Administrateur
jeanpylone a écrit :
étant assez novice dans IE6 et ses exceptions au CSS, je pense qu'il y aurait un "hack" mais je cherche toujours.

Hello,

Pour ma part, je préfère éviter autant que possible les hacks car rien de prouve qu'il ne faudra pas tout recommencer lorsque les versions des navigateurs évolueront.

Pourquoi ne pas suivre la piste proposée dans la FAQ, à savoir :
a écrit :
A l'heure actuelle, la solution la plus simple à mettre en oeuvre (en raison des lacunes de certains navigateurs) est encore d'employer une mise en page à l'aide de tableaux.
J'ai bien essayé d'utiliser des tableaux...
Avec cette méthodes j'avais un autre comportement étrange:
cette méthode marchait très bien sous IE6 (avec ma cellule du haut à la bonne hauteur, la cellule du bas prenant la place que je voulais.
Le problème venait dans ce cas la de IE7, même avec une hauteur de cellule fixe pour la première, il distribuait la hauteur totale entre toutes les lignes... Donc soit je m'y suis mal pris, soit il y a un problème...
Que je sache, j'utilise toujours ce format pour mon xhtml :
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
...
</html>


Je pense (du moins je pensais jusqu'à maintenant) que ce DOCTYPE n'a pas de problème. Suis-je dans l'erreur?

EDIT: je valide toujours avec succès mes pages grâce au validateur du W3C
Modifié par jeanpylone (25 Oct 2006 - 14:57)
Administrateur
jeanpylone a écrit :
Que je sache, j'utilise toujours ce format pour mon xhtml :
<?xml version="1.0" encoding="UTF-8" ?>...

Alors pour commencer, je t'invite à supprimer le prologue XML qui est parfaitement inutile dans ton cas, voire néfaste (il fait passer IE6 en mode Quirks) :
http://forum.alsacreations.com/faq/#item71
Modifié par Raphael (25 Oct 2006 - 15:21)
Bizarrement en l'enlevant j'ai un comportement (erroné) similaire maintenant en IE6 et IE7 (pour info ca marche sous firefox)

voici le code que je teste, peux être cela permettra de soulever la grosse bourde (ou pas) :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta content="text/html; charset=utf-8" http-equiv="content-type" />
    <title>Untitled Page</title>
</head>
<body style="background-color: LightGrey;">
    <div style="position: absolute; top: 20px; left: 20px; width: 700px; height: 500px;
        background-color: White;">
        <table style="width: 100%; height: 100%; table-layout:fixed;">
            <tr>
                <td style="height:25px;background-color:Red;">
                a</td>
            </tr>
            <tr>
                <td style="background-color:Green;width:100%;height:auto;">
                b</td>
            </tr>
        </table>
    </div>
</body>
</html>
Après maints tests, j'ai enfin trouvé comment formater mon tableau avec une première cellule de hauteur fixe!
La subtilité vient du doctype, qui doit être mis à strict pour que IE prenne en compte cette hauteur fixe...

EDIT: Fausse joie... en fait, j'avais commenté le doctype transitionnal avant la déclaration du doctype strict... le seul effet que ça a c'est que IE ne reconnait plus le doctype du tout, donc on repasse en quirk mode...
Modifié par jeanpylone (26 Oct 2006 - 11:05)
Bonjour Jean,

as tu trouvé la solution a ton problème ?
je suis confronté au même et votre aide pourrait m'être précieuse..

d'avance merci.
Sujet clos
Aller à