Problema al usar anclas y 100% en internet explorer

madman_18 · #1 (**permalink**) 16/12/2013, 09:41

Buenas a todos!

Estoy teniendo el siguiente problema:

Tengo una estructura tal que así

Código HTML:

Ver original<html style="width:100%;height:100%;">
<head>
<body style="width:100%;height:100%;overflow:hidden;">
<section style="width:100%;height:100%;">
<p>aqui va todo mi contenido</p>
</section>
<section style="width:100%;height:100%;">
<p>aqui va todo mi contenido</p>
</section>
<section style="width:100%;height:100%;">
<p>aqui va todo mi contenido</p>
</section>
<section style="width:100%;height:100%;">
<p>aqui va todo mi contenido</p>
</section>
</body>
</head>
</html>

La idea es que sea una estructura en la que se navege mediante anclas y que esté el contenido todo en una página.

Ahora bien, funciona en todos los navegadores salvo en Internet Explorer 9 hacia abajo, no es capaz de mostrarme más contenido que el 1º bloque....y no entiendo por qué....

¿Alguna sugerencia o idea de por qué puede pasarme eso? Estoy cargando las librerías que hacen que se reconozcan las etiquetas de HTML5 bien y demás, pero me sigue fallando

Crazylegs · #2 (**permalink**) 17/12/2013, 09:55

Te confirmo que solo se ve el primer bloque en Firefox e IE10. En chrome se ve todo.

El problema reside en ese overflow:hidden del body, eliminalo, ya que el body mide 100% de la pantalla, y cada bloque también, por lo tanto, los demás bloques que no caben no se muestran.

pzin · #3 (**permalink**) 17/12/2013, 10:04

Como comenta Crazylegs, por aquí andará la solución:

Si tienes algo que ocupa 400% (de una pantalla) y luego tienes algo que ocupa 25% (de su contenedor) al final tienes 4 elementos que ocupan el 100% (de la pantalla).