Su html realidad exactamente extiende a la altura del 100% de su ventana de visualización causa aquí es la ventana del navegador, no el contenido interior.
Considere esto (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 aquí tiene la altura de 300px y se desplaza. Cuando desplazas el contenido, simplemente mueves el div interno pero la altura permanece intacta, es 300px. Exactamente lo mismo ocurre cuando establece height:100% en html. La altura de su navegador sigue siendo la misma.
Al alejar la ventana de visualización, no se ha desplazado, por lo que la altura del contenido interno es menor que la altura de la ventana gráfica.
Poco, html {height:100%} se refiere a la altura de los padres no a la altura del contenido interno
ACTUALIZACIÓN:
puede especificar 3 tipos de valores a la altura del bloque de elementos:
longitud - altura fija establecida (p. '200px', '50em'). Eso es todo, no puedo decir nada más sobre eso.
porcentaje - de W3C spec:
El porcentaje se calcula con respecto a la altura del bloque de contención de la caja generada. Si la altura del bloque que lo contiene no se especifica explícitamente (es decir, depende de la altura del contenido), y este elemento no está en absoluto posicionado, el valor se computa en 'auto'. Una altura de porcentaje en el elemento raíz es relativa al bloque contenedor inicial.
- automático - La altura depende de los valores de otras propiedades. (Por lo general a lo grande de contenido interno: texto, otros elementos en línea, los elementos de bloque, etc.)
Lo que está ocurriendo cuando el navegador muestra la página:
- se pone
height: 100% para <html>. Esto significa que la altura resultante se calcula con respecto a la altura del bloque que contiene la caja generada (html -el elemento en ese caso) que contiene (initial containing block, es decir, browser window en ese caso). Digamos 1024px.
- luego se necesita
height: 100% para <body>. Fijará la altura de body en la altura ya calculada de html, es decir, 1024px.
- luego el navegador aplica
height:auto al #wrapper y luego el #container y el <p>. No sé cómo funciona exactamente eso, pero puedo suponer que pospone la configuración de altura (y respectivamente todos los otros estilos que dependen de eso, por ejemplo, fondos, bordes, etc.) y procede al contenido interno.
- El siguiente punto es contenido de texto. El navegador toma propiedades relacionadas especificadas o propias, es decir
default styles, como font-family, font-size y el alto del texto.
- después de eso, establecerá la altura en el elemento
<p>, por lo que el <p> se estirará para contener todo el contenido (el texto en ese caso). Lo mismo ocurre con el #container y el #wrapper.
Si sucede que la altura de la #wrapper es mayor que uno del cuerpo (1024 px ya que estaban de acuerdo) que el overflow debe aplicarse a la body. Eso es visible que es el predeterminado. A continuación, se aplica overflow: visible al html. Luego, el navegador muestra desplazamiento para todo el window. Honestamente, no sé si esto está especificado por la especificación W3C, pero puedo suponer que sí.
De modo que cuando se desplaza por la ventana, se mueven html y body como todos los demás elementos. Este es el mismo comportamiento que es con cualesquiera otros elementos (como en jsFiddle he publicado anteriormente):
Nota que el fondo se establece en el elemento de body, sino que se extiende a toda la canvas es decir, mucho más allá del elemento body en sí. Esto se dirige a su preocupación por la posible necesidad de establecer la propiedad bg en el cuerpo. Esto es 100% compatible con la W3C spec que establece (cortado):
documentos cuyo elemento raíz es un elemento ... "html" que se ha calculado los valores de 'transparente' para 'background-color' y ' none 'para' background-image ', los agentes de usuario deben usar el valor calculado de las propiedades de fondo del primer elemento ... elemento "cuerpo" de ese elemento al pintar fondos para el lienzo, y no deben pintar un fondo para ese elemento niño. Tales fondos también deben anclarse en el mismo punto en que estarían si se pintaran solo para el elemento raíz.
Cuando aleja la página, el navegador vuelve a calcular todas las dimensiones. Digamos que con cada Ctrl + -, la página de clic se reduce, por ejemplo, para 20%. Entonces todo su texto se reduce, porque su altura depende del tamaño de fuente, que se ve afectado por el Ctrl + - clic, respectivamente <p>, #container y #wrapper todos son reducidos porque su altura depende de la altura text. Pero body y html ambos tienen altura que depende de la altura window que no se ve afectada por el Ctrl + - clic. Es por eso que finalmente obtiene esto: 
No hay diferencia aquí entre el comportamiento de ancho y alto en ese caso. No ve el mismo problema con la dimensión horizontal simplemente porque ha configurado width: 960px; para el #container que resultó ser menor que el ancho de la ventana del navegador, por lo que no se produce desbordamiento. Si el ancho de la #container se excede el ancho del cuerpo que se vería esto: 
Todo esto es un comportamiento normal y esperado, y no hay nada que resolver aquí.
'contenedor' y 'contenedor' no son elementos HTML válidos:/ –
@BillyMoat: es un elemento div no un elemento contenedor.
– Jawad@BillyMoat: ha cambiado porque era un error tipográfico. – Jawad