tuo html si estende in realtà esattamente al 100% l'altezza del viewport causa viewport qui è la finestra del browser, non il contenuto interiore.
Considerate questo (jsfiddle):
<div id="div1">
<div id="div2">
<div id="div3">
very much content
</div>
</div>
</div>
#div1 {
height:300px;
overflow-y:scroll;
border: 1px solid black;
}
#div2 {
height:100%;
}
#div3 {
height:600px;
}
div1 qui ha l'altezza di 300px e viene fatto scorrere. Quando si scorre il contenuto si sposta semplicemente il div interno ma l'altezza rimane inviolata che è 300px. Esattamente lo stesso accade quando si imposta height:100% in html. L'altezza del tuo browser rimane la stessa.
Quando si rimpicciolisce il viewport, non si scorre, quindi l'altezza del contenuto interno è inferiore all'altezza del viewport.
Poco, html {height:100%} riguarda l'altezza del genitore non all'altezza del contenuto interno
UPDATE:
è possibile specificare 3 tipi di valori per l'altezza del blocco-elemento:
lunghezza - impostare altezza fissa (ad es. '200px', '50em'). Questo è tutto, non posso dire altro.
percentuale - da W3C spec:
La percentuale è calcolata rispetto all'altezza del blocco contenitore del riquadrato generato. Se l'altezza del blocco contenitore non è specificata esplicitamente (cioè dipende dall'altezza del contenuto) e questo elemento non è posizionato in modo assoluto, il valore calcola su 'auto'. Un'altezza percentuale sull'elemento radice è relativa al blocco contenitore iniziale.
- auto - L'altezza dipende dai valori di altre proprietà. (Generalmente l'altezza del contenuto interno: il testo, altri elementi in linea, elementi di blocco ecc)
Quello che sta accadendo quando il browser mostra la pagina:
- ottiene
height: 100% per <html>. Ciò significa che l'altezza risultante viene calcolata rispetto all'altezza del blocco contenente la casella (html -elementi in quel caso) della casella generata (initial containing block, ovvero browser window in questo caso). Diciamo 1024px.
- quindi ci vuole
height: 100% per <body>. Imposta l'altezza di body all'altezza già calcolata dello html, ovvero 1024px.
- quindi il browser applica
height:auto allo #wrapper e quindi allo #container e allo <p>. Non so come faccia esattamente, ma posso supporre che rimandi l'impostazione di altezza (e rispettivamente tutti gli altri stili che dipendono da quello cioè sfondi, bordi, ecc.) E procede al contenuto interno.
- il punto successivo è il contenuto di testo. Il browser prende le proprietà correlate specificate o proprie, ovvero
default styles, come famiglia di caratteri, dimensione del carattere e altezza del testo.
- dopo di che imposterà l'altezza allo
<p> -elementi in modo che lo <p> si allunghi per contenere tutto il contenuto (il testo in quel caso). Lo stesso vale per lo #container e lo #wrapper.
Se accade che l'altezza del #wrapper è maggiore di quello del corpo (1024 px così dire convenuto) che l'overflow deve essere applicato al body. Questo è visible che è l'impostazione predefinita. Quindi lo overflow: visible viene applicato allo html. Quindi il browser mostra scorrere per l'intero window. Onestamente, non so se questo è specificato dalle specifiche del W3C, ma posso supporre che lo sia.
Così, quando si scorre la finestra, gli html e body vengono spostati come tutti gli altri elementi. Questo è lo stesso comportamento è con altri elementi (come in jsfiddle I postato sopra):
Notare che lo sfondo è impostato sull'elemento body, ma si estende a tutta canvas ie molto oltre l'elemento body stesso. Questo è per la tua preoccupazione per l'eventuale necessità di impostare la proprietà bg sul corpo. Ciò è conforme al 100% con la W3C spec che afferma (tagliate):
documenti il cui elemento principale è un elemento ... "html" che ha calcolato i valori di 'trasparente' per 'background-color' e ' none 'for' background-image ', i programmi utente devono invece usare il valore calcolato delle proprietà dello sfondo dal primo elemento ... "body" elemento figlio quando si dipingono gli sfondi per la tela e non si deve dipingere uno sfondo per quello elemento figlio. Tali sfondi devono essere ancorati nello stesso punto in cui sarebbero se fossero dipinti solo per l'elemento radice.
Quando si rimpicciolisce la pagina, il browser ricalcola tutte le dimensioni. Diciamo che ogni Ctrl + - riduce la pagina di clic, ad esempio per il 20%. Quindi tutto il testo è ridotto, poiché la sua altezza dipende dalla dimensione del font, che è influenzata dal clic Ctrl + -, corrispondentemente <p>, #container e #wrapper tutti sono ridotti perché la loro altezza dipende dall'altezza di text. Ma body e html hanno un'altezza che dipende dall'altezza dello window che non è influenzata dal clic Ctrl + -. Ecco perché finalmente si ottiene questo: 
Non v'è alcuna differenza qui tra larghezza ed altezza comportamento in quel caso. Non vedi lo stesso problema con la dimensione orizzontale semplicemente perché hai impostato width: 960px; per lo #container che si è rivelato inferiore alla larghezza della finestra del browser, quindi non si verificano overflow. Se la larghezza della #container sono stati superando la larghezza del corpo si vede questo: 
Tutto questo è un comportamento normale e previsto e non c'è nulla da risolvere qui.
'wrapper' e 'contenitore' non sono elementi HTML validi:/ –
@BillyMoat: è un elemento div non un wrapper.
– Jawad@BillyMoat: modificato come se fosse un errore di battitura. – Jawad