2 colonnes hauteur pleine disposition dans IE6

Donc, je suis en train de reproduire cela dans IE6: http://lynet.ca/~alumb/layout.html
Il fonctionne parfaitement dans FF et Chrome, mais échoue lamentablement dans IE6. Aucune suggestion?2 colonnes hauteur pleine disposition dans IE6

Voici l'ensemble des exigences:

+-----------------------------+ 
| NavBar      | 
|-----------------------------| 
|Menu | Content    | 
|  |      | 
|  |      | 
|  |      | 
|  |      | 
|  |      | 
|  |      | 
+-----------------------------+

NavBar est une hauteur définie dans EM (disons 2em)
Menu est une largeur de jeu dans EM (dire 10em) et remplit la bas de la page
Il devrait y avoir aucune barre de défilement
global page doit défiler en place et ne couvre pas la barre de navigation (comme trop-plein: défilement)
co ntent est un iFrame qui remplit tout l'espace disponible.
mise en page doit survivre resising le navigateur

J'ai essayé css, mais il se traduit par une quantité folle de css et je ne peux toujours pas l'iframe pour remplir correctement l'espace.
J'ai essayé des tables, mais je n'arrive pas à faire défiler le menu correctement.
La seule solution que j'utilise implique des cadres, mais ce n'est pas vraiment la voie que je veux aller.

Solution:
Ainsi, après environ 36 heures de dénigrement à elle, j'ai enfin une solution. La seule façon de faire fonctionner ça était avec des mises en page basées sur des tables. Cependant, il y a une anomalie dans Firefox qui cause la hauteur: 100% à calculer différemment que dans tous les autres navigateurs, donc j'ai aussi dû ajouter la position: style fixe. Ceci est principalement ignoré par IE6 qui retombe sur la mise en page basée sur la table.

Un exemple de la mise en page finale peut être vu ici: http://lynet.ca/~alumb/working.html

Source

2009-03-26 alumb

Il est difficile de mélanger des dimensions particulièrement verticalement avec CSS. La barre de navigation est 2 ems haute et le menu est 100% - 2ems haut - cette dernière hauteur est difficile à faire avec du CSS pur. Vous devrez peut-être le calculer avec JavaScript.

Une autre solution consiste à faire en sorte que la page se comporte comme une page Web normale (tout en un seul morceau). Voici un exemple de disposition qui pourrait aider: Left menu layout (em widths)

Source

2009-03-27 00:03:35

Pour diverses raisons, je ne peux pas le faire, autant que je le voudrais. L'ensemble des exigences est fixe. – alumb

La solution est facile. Utilisez le positionnement absolu.

body { 
    margin: 0; 
    padding: 0; 
    overflow: hidden; 
} 

#NavBar { 
} 


#Menu, #Content { 
    position: absolute; 
    top: 3em; 
    bottom: 0; 
    overflow: auto; 
} 

#Menu { 
    width: 10em; 
} 

#Content { 
    overflow: hidden; 
    left: 10em;   /* #menu.width */ 
    right: 0; 
} 

iframe { 
    position: absolute; 
    bottom: 0; 
    width: 100%; 
    height: 100%; 
}

Pour que IE fonctionne, assurez-vous de définir votre type de document. Par exemple, insérez ceci en haut de votre fichier HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http://www.w3.org/TR/html4/strict.dtd">

Source

2009-03-27 00:07:23 strager

Ne fonctionne pas. Vous vous retrouvez avec ceci: http://lynet.ca/~alumb/strager.html – alumb

@alumb, mise à jour. – strager

mis à jour http://lynet.ca/~alumb/strager.html. ne fonctionne toujours pas. – alumb

2 colonnes hauteur pleine disposition dans IE6

Répondre

Questions connexes