Hauteur CSS 100% dans IE7

Question

J'ai une mise en page difficile sur mon site et j'ai un problème avec IE7. Comment puis-je dans cet exemple définir l'enveloppe interne pour remplir la hauteur de l'enveloppe externe?

http://jsfiddle.net/fMPNw/2/

Answer 1

Vous devez définir explicitement la hauteur de .wrapper, dans cette situation. Cela étant dit, si vos attributs top: et bottom: vont rendre la hauteur dynamique, votre seule solution est de réinitialiser la hauteur avec JavaScript, de lier la hauteur à mettre à jour lors du redimensionnement de la fenêtre, etc

Answer 2

J'ai pu obtenir .wrapper2 pour mettre en page correctement en le rendant absolument positionné. En utilisant les 2 lignes suivantes de CSS, largeur pour corriger le problème de largeur causé par le positionnement absolu.

position:absolute; 
width:100%; 

résultat final étant:

.wrapper{ 
    position: absolute; 
    top: 310px; 
    bottom: 130px; 
    border: 1px solid red; 
    width: 100px; 
} 
.wrapper2{ 
    border: 1px solid blue; 
    height: 100%; 
    width:100%; 
    position:absolute; 
}