Aggiornamento nel 2019
TL; DR: oggi l'opzione migliore è l'ultima in questa risposta: flexbox. Tutto lo supporta bene e lo fa da anni. Vai per quello e non guardare indietro. Il resto di questa risposta è lasciato per ragioni storiche.
Il trucco è capire di cosa è preso il 100%. La lettura delle specifiche CSS può aiutarti.
Per farla breve - esiste qualcosa come "contenere blocco" - che non è necessario l'elemento genitore. Detto semplicemente, è il primo elemento della gerarchia che ha posizione: relativa o posizione: assoluta. O l'elemento del corpo stesso se non c'è nient'altro. Quindi, quando dici "larghezza: 100%", controlla la larghezza del "blocco contenitore" e imposta la larghezza del tuo elemento sulla stessa dimensione. Se c'era qualcos'altro lì, allora potresti ottenere i contenuti di un "blocco contenente" che sono più grandi di se stesso (quindi "traboccanti").
L'altezza funziona allo stesso modo. Con un'eccezione. Non puoi ottenere l'altezza al 100% della finestra del browser. L'elemento di livello più alto, rispetto al quale è possibile calcolare il 100%, è l'elemento body (o html? Non sicuro) e che si estende abbastanza da contenere il suo contenuto. Specificare l'altezza: il 100% su di esso non avrà alcun effetto, perché non ha alcun "elemento genitore" rispetto al quale misurare il 100%. La finestra stessa non conta. ;)
Per allungare esattamente il 100% della finestra, hai due possibilità:
- Usa JavaScript
- Non usare DOCTYPE. Questa non è una buona pratica, ma mette i browser in "modalità strane", in cui puoi fare height = "100%" sugli elementi e li allungherà alla dimensione della finestra. Nota che probabilmente il resto della tua pagina dovrà essere cambiato anche per adattarsi alle modifiche di DOCTYPE.
Aggiornamento: non sono sicuro di non essermi sbagliato già quando l'ho pubblicato, ma ora questo è sicuramente obsoleto. Oggi puoi farlo nel tuo foglio di stile: html, body { height: 100% }e in realtà si estenderà a tutto il tuo viewport. Anche con un DOCTYPE. min-height: 100%potrebbe anche essere utile, a seconda della situazione.
E non consiglierei a nessuno di creare più un documento in modalità strane, perché causa molto più mal di testa che risolverli. Ogni browser ha una diversa modalità di stranezza, quindi rendere la tua pagina coerente in tutti i browser diventa più difficile di due ordini di grandezza. Usa un DOCTYPE. Sempre. Preferibilmente quello HTML5 - <!DOCTYPE html>. È facile da ricordare e funziona come un fascino in tutti i browser, anche in quelli di 10 anni.
L'unica eccezione è quando devi supportare qualcosa come IE5 o qualcosa del genere. Se ci sei, allora sei da solo comunque. Quei browser antichi non assomigliano per niente ai browser di oggi, e pochi consigli che vengono forniti qui ti aiuteranno con loro. Il lato positivo, se ci sei, probabilmente devi solo supportare UN tipo di browser, che elimina i problemi di compatibilità.
In bocca al lupo!
Aggiornamento 2: Ehi, è passato molto tempo! 6 anni dopo, nuove opzioni sono sulla scena. Ho appena avuto una discussione nei commenti qui sotto, qui ci sono altri trucchi per te che funzionano nei browser di oggi.
Opzione 1 - posizionamento assoluto. Bello e pulito per quando si conosce l'altezza precisa della prima parte.
body, html {width: 100%; height: 100%; margin: 0; padding: 0}
.first-row {position: absolute;top: 0; left: 0; right: 0; height: 100px; background-color: lime;}
.second-row {position: absolute; top: 100px; left: 0; right: 0; bottom: 0; background-color: red }
.second-row iframe {display: block; width: 100%; height: 100%; border: none;}
<div class="first-row">
<p>Some text</p>
<p>And some more text</p>
</div>
<div class="second-row">
<iframe src="https://jsfiddle.net/about"></iframe>
</div>
Alcune note: il second-rowcontenitore è necessario perché bottom: 0e right: 0non funziona su iframe per qualche motivo. Qualcosa a che fare con l'essere un elemento "sostituito". Ma width: 100%e height: 100%funziona bene. display: blockè necessario perché è un inlineelemento per impostazione predefinita e gli spazi bianchi iniziano a creare strani overflow.
Opzione 2 - tabelle. Funziona quando non conosci l'altezza della prima parte. Puoi usare i <table>tag effettivi o farlo in modo elegante con display: table. Vado per quest'ultimo perché sembra essere di moda in questi giorni.
body, html {width: 100%; height: 100%; margin: 0; padding: 0}
.row-container {display: table; empty-cells: show; border-collapse: collapse; width: 100%; height: 100%;}
.first-row {display: table-row; overflow: auto; background-color: lime;}
.second-row {display: table-row; height: 100%; background-color: red; overflow: hidden }
.second-row iframe {width: 100%; height: 100%; border: none; margin: 0; padding: 0; display: block;}
<div class="row-container">
<div class="first-row">
<p>Some text</p>
<p>And some more text</p>
</div>
<div class="second-row">
<iframe src="https://jsfiddle.net/about"></iframe>
</div>
</div>
Alcune note: overflow: autoassicurarsi che la riga includa sempre tutto il suo contenuto. Altrimenti gli elementi fluttuanti possono talvolta traboccare. La height: 100%seconda riga si assicura che si espanda tanto quanto può spremere la prima riga il più piccolo possibile.
Opzione 3 - flexbox. Il più pulito di tutti, ma con un supporto del browser meno che stellare. IE10 avrà bisogno di -ms-prefissi per le proprietà del flexbox e niente di meno non lo supporterà affatto.
body, html {width: 100%; height: 100%; margin: 0; padding: 0}
.row-container {display: flex; width: 100%; height: 100%; flex-direction: column; background-color: blue; overflow: hidden;}
.first-row {background-color: lime; }
.second-row { flex-grow: 1; border: none; margin: 0; padding: 0; }
<div class="row-container">
<div class="first-row">
<p>Some text</p>
<p>And some more text</p>
</div>
<iframe src="https://jsfiddle.net/about" class="second-row"></iframe>
</div>
Alcune note - overflow: hiddenè perché iframe genera ancora una sorta di overflow anche con display: blockin questo caso. Non è visibile nella vista a schermo intero o nell'editor dei frammenti, ma la piccola finestra di anteprima ottiene una barra di scorrimento aggiuntiva. Non ho idea di cosa sia, gli iframe sono strani.