Tema: ¿Cómo lograr siempre un height: 100%?
Ver Mensaje Individual
  #1 (permalink)  
Antiguo 02/11/2017, 13:56
Avatar de berkeleyPunk
berkeleyPunk
 
Fecha de Ingreso: febrero-2013
Ubicación: México :C
Mensajes: 565
Antigüedad: 11 años, 2 meses
Puntos: 22
Sonrisa ¿Cómo lograr siempre un height: 100%?
Hola, mis amigos, voy al grano!

CONTEXTO. Sé que este tema es viejo y se han dado miles de respuestas. Pero creo que mi caso es diferente. Recientemente tuve que crear varios documentos HTML. Para el sistema de rejillas usé Uikit. Estos documentos HTML necesitan una imagen de background para el body.

ESTRUCTURA BÁSICA HTML
Código HTML: 
Ver original
  1. <!DOCTYPE html>
  2. <html lang="es">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <title></title>
  8.     <meta name="viewport" content="width=device-width, initial-scale=1">
  9. </head>
  10. <body>
  11.  
  12.     <div class="uk-height-1-1">
  13.         <div class="uk-grid uk-height-1-1">
  14.  
  15.             <div class="uk-width-1-1">
  16.                 <div class="uk-width-expand">
  17.                     <!-- Aquí va el menú -->
  18.                 </div>
  19.             </div>
  20.  
  21.  
  22.             <div class="uk-width-1-1">
  23.                 <div class="uk-width-expand">
  24.                     <!-- Aquí va el contenido general -->
  25.                 </div>
  26.             </div>
  27.  
  28.  
  29.             <div class="uk-width-1-1 uk-vertical-align">
  30.                 <div class="uk-vertical-align-bottom uk-width-expand">
  31.                     <!-- Aquí va el footer, que siempre se pone en el fondo del body gracias al: uk-vertical-align-bottom  -->
  32.                 </div>
  33.             </div>
  34.  
  35.         </div>
  36.     </div>
  37.  
  38. </body>
  39. </html>

PROBLEMA. Algunas veces la altura del body es más chica que el contenido, así que la imagen de background no cubre todo el contenido. Es decir, parte del contenido queda fuera del body. Algunas veces puedo arreglar esto poniendo 100% al body. Otras veces se arregla poniendo auto. Nunca es la misma solución. Esto pasa ponga o no:
Código CSS: 
Ver original
  1. body, html {width: 100%; height: 100%;}

Por favor, ¿qué estoy haciendo mal? ¿Es normal que tenga que alternar entre height:auto y height:100% para cada documento, en desktop y mobile?

Saludos