ejemplos - estructura html5 css3
¿Por qué no puedo hacer mi div 100% de altura si uso un doctype HTML5? ¿Cómo lo consigo 100% de altura? (2)
Estoy trabajando para ordenar el diseño para una aplicación web de galería bastante simple, pero cuando uso una declaración de tipo de documento HTML5, la altura de algunos de mis divs (que eran del 100%) se reduce de inmediato, y parece que no puedo rellenar hacer copias de seguridad utilizando CSS.
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 elimino la declaración doctype HTML5, todo es como quiero que sea, pero realmente quiero usar la declaración doctype HTML5 adecuada.
- Si configuro el doctype en HTML5 y no hago cambios, el div con la foto y los divs de pie de página no son visibles, presumiblemente porque son de 0px de altura.
- Si configuro el doctype en HTML5 y hago el
body { height: 100px }y.container { height: 100px }o.container { height: 100% }, se vuelve visible, pero lo que necesito es que sea la altura completa y no Que una altura en píxeles. - Si trato de hacer lo mismo que arriba, pero con el
body { height: 100% }las divs de foto y pie de página no son visibles de nuevo.
¿Qué necesito hacer para obtener el 100% de altura para que las divs de fotos y pies de página estén en altura completa?
De hecho, para que funcione haga lo siguiente:
<!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>
Solo si el elemento principal tiene una altura definida, es decir, no es un valor de auto . Si eso tiene un 100% de altura, también se debe definir la altura de los padres. Esto podría ir hasta el elemento raíz html .
Así que establezca la altura del html y el elemento del body en 100% , así como cada elemento ancestral de ese elemento que desee que tenga la height del 100% en primer lugar.