2010-08-13 9 views
1

Je suis en train de concevoir une page HTML avec les exigences suivantes:mise en page div défilement HTML problème

  • un élément tête fixe (headerBox) et pied de page (footerBox) (ne doit pas faire défiler)
  • le contenu zone contient un élément supérieur (largeur de 100%, contentBoxMap) qui peut être expanned sur toute la zone de contenu
  • à gauche (contentBoxLeft) et à droite l'élément de contenu (contentBoxRight) sous l'élément de contenu supérieur (contentBoxMap)
  • l'élément de contenu correct (contentBoxRight) doit être étendu vers le bas et défiler en cas de débordement.

J'ai trouvé un solution [jsbin] qui fonctionne presque. Le problème est qu'il y a un débordement dans le bon élément de contenu qui coule sous le pied de page. Voir l'image suivante comme exemple: alt text http://img541.imageshack.us/img541/897/screenshot150206.png

Question:

  1. Quelqu'un peut-il me dire comment résoudre le problème de débordement dans contentBoxRight? Je suis également heureux si vous pouviez me dire quel est le problème avec ma solution actuelle. Est-ce même une bonne approche pour le faire, compte tenu de la compatibilité du navigateur? Enfin, il devrait être le même sur IE 7+, FF 3+, Safari 3+. IE6 et Opera devraient avoir l'air ok, mais cela n'a pas d'importance s'il diffère abit.

Merci pour tous les conseils.

+0

Pourquoi n'utilisez-vous pas simplement 'position: fixed' pour la (les) zone (s) de contenu? – igor

+0

@igor: il n'y a pas de 'position: fixed', juste' absolute'. La raison était de faire fonctionner aussi IE6, mais c'était juste l'idée initiale. Je n'ai pas encore testé sur IE6. – Haes

+0

.. Oui, il y a une 'position: fixed;'! http://www.w3schools.com/Css/pr_class_position.asp – Hristo

Répondre

1

Vous pouvez supprimer la propriété height:100%; dans #contentBoxRight, puis de corriger l'arrière-plan bleu de #contentBox.

+0

Voilà, merci. – Haes