Pas d'espace entre le bas de l'écran et le pied de page

Question

J'ai des problèmes avec la création d'un espace entre le bas de l'écran et la dernière div.

Dans Chrome, pas de problème, mais avec IE la bordure est juste en bas de l'écran.

<div id="container"> 
<div id="header">...</div> 
<div id="main">...</div> 
<div id="footer">...</div> 
</div> 

Le dernier div seulement a <br /> « s

Voici le CSS ...

html, 
body { 
    margin:0; 
    padding:0; 
    height:100%; 
} 
#container { 
    top:30px; 
    left:15px; 
    width:60%; 
    border:black solid 1px; 
    min-height:100%; 
    position:relative; 
} 
#header {  
    padding:0px; 
} 
#body { 
    background-color:FAF0E6; 
    padding:10px; 
    padding-bottom:25px; /* Height of the footer */ 
} 
#footer { 
    position:absolute; 
    bottom:10px; 
    width:100%; 
    height:25px; /* Height of the footer */ 
} 

---

Comme je l'ai dit, fonctionne très bien dans Chrome, mais pas tant C'EST À DIRE.

Ce que je voudrais, c'est un espace en haut et en bas de l'écran. Edit - Comme note ajoutée, je ne vois même pas la bordure inférieure dans IE.

Merci pour l'aide,

-Kris

Answer 1

Vous pouvez remplacer min-height: 100% en hauteur: 100% en #container. Fonctionne dans IE8.

EDIT: Est-ce ce que vous cherchez?

 
html { 
    margin:0; 
    padding:0; 
} 
body { 
    background-color:FAF0E6; 
    margin-top:35px; 
    margin-bottom:10px; 
} 
#container { 
    left:15px; 
    width:60%; 
    height:100%; 
    position:relative; 
} 
#header {  
    padding:0px; 
} 

#footer { 
    position:absolute; 
    bottom:10px; 
    width:100%; 
    height:25px; 
} 

Answer 2

essayez d'ajouter border-bottom: solid #FFFFFF 10px; à la carrosserie. Fonctionne pour moi dans IE8.