Faire mon étirement DIV pour remplir l'espace de page disponible avec CSS valide dans IE

Question

J'essaie de faire une mise en page DIV simple compatible avec IE, et il me donne l'enfer.

Voici la mise en page de base, je travaille pour:

<div id="body" style="background: blue;"> 
<div id="header"> 
HEADER 
</div> 
<div id="content" style="height: 88%;"> 
CONTENT HERE 
</div> 
<div id="footer"> 
FOOTER 
</div> 
</div> 

J'utilise des coins arrondis CSS sur la div du corps, et j'ai une info navbar et pied de page dans #footer ainsi qu'une barre de navigation principale à onglets au #header.

Mon principal problème a été de faire en sorte que le div #content s'étende verticalement pour s'adapter à la page entière lorsque je n'ai qu'une petite quantité de contenu SANS créer de barres de défilement verticales.

Si je crée #contentheight: 100%;, l'en-tête et le pied de page provoquent une augmentation de la hauteur de la page au-delà de 100% et le déclenchement des barres de défilement.

Faire la hauteur « #content 88% fait l'affaire dans FireFox, mais il y a deux problèmes avec cette solution:

a) Il est une bidouille horrible b) Il ne fonctionne pas dans IE (bien sûr) .

Quelqu'un a des idées sur la façon d'accomplir cela? Je suppose que devrait être une situation assez commune pour les concepteurs de sites Web là-bas.

Answer 1

Là vous allez, essayez ce modèle, c'est vraiment simple et je pense que cela résoudrait votre problème.

HTML:

<div id="wrapper"> 
    <div id="header"> 
    <div id="header_900"> 
    <p>header</p> 
    </div><!--header_900--> 
</div>  
<div id="content"> 
    <div id="content_900"> 
     <p>content</p> 
    </div> </div>  

</div><!--wrapper--> 


<div id="footer"> 
<div id="footer_900"> 
    <p>footer</p> 
</div> </div> 

CSS

body, html{ 
height: 100%; 
} 

body, p { 
margin: 0; padding: 0; 
} 

#wrapper { 
min-height: 100%; 
} 

* html #wrapper { 
height: 100%; 
} 



/*HEADER------------------------------------*/ 
#header { 
width: 100%; 
background: #666; 
} 

#header_900 { 
width: 960px; 
height: 100px; 
margin: 0 auto; 
position: relative; 
overflow: hidden; 
} 

/*FOOTER------------------------------------*/ 
#footer { 
width: 100%; 
height: 100px; 
margin: -100px auto 0 auto; /*THIS SHOULD BE EQUAL TO THE FOOTERS HEIGHT*/ 
position: relative; 
background: #666; 
} 

#footer_900 { 
width: 960px; 
height: 100px;/*THIS IS THE FOOTERS HEIGHT*/ 
position: relative; 
margin: 0 auto; 
} 

/*CONTENT------------------------------------*/ 
#content { 
width: 100%; 
padding-bottom: 100px; /*THIS SHOULD BE EQUAL TO THE FOOTERS HEIGHT*/ 
} 

#content_900 { 
width: 960px; 
margin: 0 auto; 
overflow: hidden; 
} 

Answer 2

Je ne pense pas qu'il existe un moyen officiel d'accomplir cela à moins d'utiliser le mode quirks. Si vous utilisez le mode Quirks (pas doctype), il ressemblerait à quelque chose comme ceci:

html, body { 
    margin: 0; 
    padding: 0; 
    height: 100%: 
} 

#content { 
    height: 100%: 
} 

Peut-être ce que vous cherchez est une version adaptée de quelque chose comme ceci: http://www.alistapart.com/comments/fauxcolumns