¿Por qué no puedo hacer que mi div sea 100% alto si uso un doctype HTML5? Cómo lo obtengo 100% de altura

Estoy trabajando para ordenar el diseño de una aplicación de galería bastante simple, pero cuando utilizo una declaración de tipo de documento HTML5, la altura de algunos de mis divs (que eran 100%) se reduce y parece que no puedo rellenarlos con CSS.¿Por qué no puedo hacer que mi div sea 100% alto si uso un doctype HTML5? Cómo lo obtengo 100% de altura

Mi HTML está en https://dl.dropbox.com/u/16178847/eyewitness/b/index.html y CSS está en https://dl.dropbox.com/u/16178847/eyewitness/b/style.css

Si quito la declaración DOCTYPE HTML5, todo es como yo quiero que sea, pero realmente quiero usar la declaración correcta DOCTYPE HTML5.
Si configuro el tipo de documento en HTML5 y no realizo cambios, el div con la foto y los separadores del pie de página no son visibles, presumiblemente porque tienen 0px de alto.
Si configuro Doctype en HTML5 y hago body { height: 100px } y .container { height: 100px } o .container { height: 100% }, se vuelve visible, pero lo que necesito es que sea de altura completa en lugar de altura en píxeles.
Si trato de hacer lo mismo que arriba, pero con el body { height: 100% } los divs de foto y pie de página no son visibles de nuevo.

¿Qué debo hacer para obtener el 100% de altura para que mi foto y el pie de página div sean de altura completa?

Fuente

2012-06-03 Grezzo

Esto no tiene nada que ver con HTML5 o CSS3. (¿Qué sucede con cualquier otro tipo de documento? ¿Desde cuándo 'height' es una nueva cosa de CSS3?) – BoltClock

Cuando haces que el cuerpo sea 100% alto, ¿qué esperas que sea 100%? – robertc

@BoltClock Gracias por su comentario. Ese es un punto justo sobre CSS3, he eliminado esa etiqueta. No he probado ningún otro tipo de documento, solo lo he probado sin doctype o el doctype HTML5. ¿Qué esperas deducir del comportamiento con otras declaraciones de tipo de documento? Estoy más que feliz de probar algunos e informar, pero no estoy seguro de cuáles serían relevantes para probar. – Grezzo

Solo si el elemento principal tiene una altura definida, i..e no tiene un valor de auto. Si tiene una altura del 100%, también se debe definir la altura de los padres del padre. Esto podría ir hasta el elemento raíz html.

A fin de establecer la altura de la html y el elemento body a 100%, así como todos los elementos ancestro único de ese elemento que desea tener la 100%height en el primer lugar.

Fuente

2012-06-03 16:30:36 HerrSerker

Entonces, ¿está diciendo que (en el modo estándar) no hay forma de hacer que una página sea igual? alto como la ventana gráfica (sin usar javascript para establecer una altura en unidades en vez de porcentaje)? – Grezzo

Estoy diciendo que puedes. Dale al elemento html 100% de altura, da al elemento del cuerpo 100% de altura y así sucesivamente con cada elemento hijo del cuerpo y los elementos secundarios de ese elemento hasta que llegues al elemento que deseas que sea 100% en primer lugar. – HerrSerker

Esa es exactamente la solución, no tenía idea de que pudiera aplicar CSS al elemento html. ¡Buena esa! – Grezzo

De hecho, para que funcione hacer de la siguiente manera:

<!DOCTYPE html> 
<html> 
<head> 
    <title>Vertical Scrolling Demo</title> 
    <style> 
    html, body { 
     width: 100%; 
     height: 100%; 
     background: white; 
     margin:0; 
     padding:0; 
    } 
    .page { 
     min-height: 100%; 
     width: 100%; 
    } 
    </style> 
</head> 
<body> 
    <div id="nav" class="page"> 
    <ul> 
     <li><a href="#about">About</a></li> 
     <li><a href="#portfolio">Portfolio</a></li> 
     <li><a href="#contact">Contact</a></li> 
    </ul> 
    </div> 
    <div id="page1" class="page"> 
    <h1><a name="about">about</a></h1> 
    About page content goes here. 
    </div> 
    <div id="page2" class="page"> 
    <h1><a name="portfolio">portfolio</a></h1> 
    Portfolio page content goes here. 
    </div> 
    <div id="page3" class="page"> 
    <h1><a name="contact">contact</a></h1> 
    Contact page content goes here. 
    </div> 
</body> 
</html>

Fuente

2012-06-08 08:50:51 barraq

¿Por qué no puedo hacer que mi div sea 100% alto si uso un doctype HTML5? Cómo lo obtengo 100% de altura

Respuesta

Cuestiones relacionadas