Perché non posso rendere il mio div 100% altezza se utilizzo un doctype HTML5? Come ottengo il 100% di altezza

Sto lavorando per ottenere il layout ordinato per una semplice webapp gallery, ma quando uso una dichiarazione di doctype HTML5, l'altezza di alcune delle mie div (che erano al 100%) si restringe correttamente giù, e non riesco a ricompilarli usando CSS.Perché non posso rendere il mio div 100% altezza se utilizzo un doctype HTML5? Come ottengo il 100% di altezza

mio HTML è a https://dl.dropbox.com/u/16178847/eyewitness/b/index.html e CSS è a https://dl.dropbox.com/u/16178847/eyewitness/b/style.css

Se rimuovo la dichiarazione DOCTYPE HTML5, tutto è come io voglio che sia, ma voglio davvero utilizzare la corretta dichiarazione DOCTYPE HTML5.
Se imposto il doctype su HTML5 e non apporto modifiche, il div con la foto e il div footer non sono visibili, presumibilmente perché sono alti 0 px.
Se si imposta il doctype su HTML5 e si rende body { height: 100px } e .container { height: 100px } o .container { height: 100% }, diventa visibile, ma ciò di cui ho bisogno è che sia l'altezza completa anziché l'altezza in pixel.
Se provo a fare lo stesso come sopra, ma con il body { height: 100% } le div di foto e piè di pagina non sono più visibili.

Cosa devo fare per ottenere il 100% di altezza in modo che i miei div di foto e piè di pagina siano a tutta altezza?

fonte

2012-06-03 Grezzo

Questo non ha nulla a che fare con HTML5 o CSS3. (Cosa succede con qualsiasi altro doctype? Da quando era "height" una nuova cosa CSS3?) – BoltClock

Quando si realizza il 100% dell'altezza del corpo, cosa si aspetta che sia al 100%? – robertc

@BoltClock Grazie per il tuo commento. Questo è un punto giusto su CSS3, ho rimosso quel tag. Non ho provato nessun altro doctype, l'ho provato solo senza doctype o con il doctype HTML5. Cosa speri di capire dal comportamento con altre dichiarazioni doctype? Sono più che felice di provarne alcuni e riferire, ma non sono sicuro quali sarebbero rilevanti da provare? – Grezzo

Solo se l'elemento genitore ha un'altezza definita, io..e non un valore di auto. Se questo ha il 100% di altezza, anche l'altezza del genitore del genitore deve essere definita. Questo potrebbe andare fino all'elemento radice html.

Quindi impostare l'altezza del html e l'elemento body-100%, così come ogni singolo elemento antenato di quell'elemento che si desidera avere la 100%height in primo luogo.

fonte

2012-06-03 16:30:36 HerrSerker

Quindi stai dicendo che (in modalità standard) non c'è modo di rendere una pagina uguale altezza come viewport (senza usare javascript per impostare l'altezza in unità anziché in percentuale)? – Grezzo

Sto dicendo che puoi. Assegna l'elemento html al 100% di altezza, assegna l'elemento del corpo al 100% di altezza e così via con ogni elemento figlio del corpo e gli elementi figli di quell'elemento fino a raggiungere l'elemento che vuoi essere al 100% in primo luogo. – HerrSerker

Questa è esattamente la soluzione, non avevo idea di poter applicare CSS all'elemento html. Ben fatto! – Grezzo

Infatti, per farlo funzionare fare come segue:

<!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>

fonte

2012-06-08 08:50:51 barraq

Perché non posso rendere il mio div 100% altezza se utilizzo un doctype HTML5? Come ottengo il 100% di altezza

risposta

Problemi correlati