Bueno, como dice el titulo.. tengo un problema con el atributo "min-height" en firefox, no funciona.
En fin, así se ve en Chrome:

Y así en Firefox:

(Lógicamente quiero que quede como en Chrome).
Ya he probado con lo de:
min-height:100%
height: auto !important;
height: 100%;
y nada, no funciona...
CSS:
* {margin:0px auto;padding:0px;outline: 0px;}
html, body {
font: 100% Arial, Helvetica;
color: #333;
background: #FFF url(../images/fondo.png) repeat-x;
outline: 0;
}
html { height: 100%; }
body { min-height: 100%; height: 100%; }
#pagina_contenedor{
min-height:100%;
height:auto !important;
height: 100%;
margin:0px auto;padding:0px;outline: 0px;
}
#top_nav{
height:22px;
width:0 auto;
background: #404040;
color:white;
padding:5px;
padding-left:15px;
border: #161616 1px solid;
border-top: 0px;
}
#navbar {
text-shadow: 0px 0px white, 1px 1px #333;
margin:0 auto;
margin-top:20px;
padding:0px 5px;
text-transform:uppercase;
font-size:12px;
border:1px solid #4c7d04;
background: -webkit-linear-gradient(#88e007, #78c800);
background: -moz-linear-gradient(#88e007, #78c800);
background: -o-linear-gradient(#88e007, #78c800);
-moz-border-radius-top-right: 5px;
-moz-border-radius-top-left: 5px;
-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 5px;
border-top-right-radius: 5px;
border-top-left-radius: 5px;
behavior:url(../scripts/border-radius.htc);
}
#block{
width:80%;
}
#contenedor{
width:78.4%;
background: #ececec;
border:1px solid grey;
border-top:0px;
border-bottom:0px;
padding:10px;
padding-bottom:5px;
overflow: hidden;
height:auto !important;
height: 100%;
min-height:100%;
}
#footer{
color: #264000;
font-size:12px;
padding:5px;
padding-left:15px;
padding-right:15px;
height: 15px;
border:1px solid #4c7d04;
width:97.7%;
background: -webkit-linear-gradient(#88e007, #78c800);
background: -moz-linear-gradient(#88e007, #78c800);
background: -o-linear-gradient(#88e007, #78c800);
}
<div id="pagina_contenedor" class="clearfloat">
<!-- <div id="top_nav"><img src="images/logo.png" style="margin-top:3px;"></div> -->
<div id="block" class="clearfloat">
<div id="navbar" class="clearfloat">
<ul id="page-bar" class="left clearfloat">
<li><a href="#">Home</a></li>
<li><a href="#">Descargas</a></li>
<li><a href="#">Foro</a></li>
<li><a href="#">Screenshots</a></li>
<li><a href="#">Noticias</a></li>
</ul>
</div>
</div>
<div id="contenedor" class="clearfloat">
<div id="page" class="left clearfloat">
<div id="content">
<h5>Titulo de la sección</h5>
<div id="notice">
Esta es otra sección muahahaha xdd <br>
es expandible
<p>
todo lo<br>
que quieras.
</p>
</div>
</div>
</div>
<div id="sidebar" class="right clearleft">
<div id="menu">
<h5>Templates</h5>
<div id="content">
Contenido
</div>
</div>
</div>
</div>
<div class="clearfloat"></div>
</div>
<div id="footer">
<div class="right">Diseñado por <span class="strong">Guille López</span></div>
<strong>Great Gamers</strong> template
</div>
¿Alguien me ayuda a que funcione como en Chrome?