[SOLUCIONADO] ¿Cómo lograr siempre un height: 100%?

berkeleyPunk · #1 (**permalink**) 02/11/2017, 13:56

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<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
 
    <div class="uk-height-1-1">
        <div class="uk-grid uk-height-1-1">
 
            <div class="uk-width-1-1">
                <div class="uk-width-expand">
                    <!-- Aquí va el menú -->
                </div>
            </div>
 
 
            <div class="uk-width-1-1">
                <div class="uk-width-expand">
                    <!-- Aquí va el contenido general -->
                </div>
            </div>
 
 
            <div class="uk-width-1-1 uk-vertical-align">
                <div class="uk-vertical-align-bottom uk-width-expand">
                    <!-- Aquí va el footer, que siempre se pone en el fondo del body gracias al: uk-vertical-align-bottom  -->
                </div>
            </div>
 
        </div>
    </div>
 
</body>
</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 originalbody, 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

Rafael · #2 (**permalink**) 03/11/2017, 14:44

No hay manera de que el contenido sea más grande que el body.

Lo que probablemente está pasando es de que estás usando una pocisión absoluta que está sacando del universo a tu contenido. En general es una mala práctica. Muy mala.

Cuando el contenido es poco busca usar un sticky footer.

Y específicamente para tu problema busca usar el viewport height. https://www.google.com.mx/search?q=viewport+height+css

Pero puede ser tan fácil como poner la imagen de fondo con background-image.

Trata quitando también el margin y el padding de esos elementos.

Como comentario aparte.
Usa html semántico.

Código HTML:

Ver original<header>
<nav></nav>
</header>
 
<main>
</main>
 
<footer>
</footer>

Listo, no hacen falta explicaciones ni anidados extra.

La etiqueta main puede no estar soportada por todos los navegadores, pero no te afecta. Es simplemente un contenedor.

g3kdigital · #3 (**permalink**) 15/11/2017, 14:49

Prueba esto:

Código CSS:

Ver originalbody{
min-height: 100vh
}

ArturoGallegos · #4 (**permalink**) 16/11/2017, 10:28

Contradiciendo al compañero @Rafael

Cita:

No hay manera de que el contenido sea más grande que el body.

Claro que el contenido puede y en muchos casos el contenido sera mas grande que el body, la culpa esta en estas reglas.

Código CSS:

Ver originalbody, html {width: 100%; height: 100%;}

Con esto le estas diciendo que el body debe ser el 100% de tu ventana del navegador, lo que da cabida y ocasiona que el contenido pueda quedar oculto y salirse del body.

lo que debes usar es min-height y min-width

Por otro lado quizás el problema no es el body sino la imagen que quieres incrustar, aunque sin ver como metes esa imagen y como es, no te podemos ayudar mas.

berkeleyPunk · #5 (**permalink**) 29/12/2017, 16:48

Gracias a todos por responder. Finalmente logré sacar adelante el proyecto que tenía, ya ni recuerdo bien cómo logré solucionar el problema.

Cita:

Iniciado por ArturoGallegos

Contradiciendo al compañero @Rafael
...lo que debes usar es min-height y min-width

Eso es precisamente lo que me voy a anotar para la próxima.

Rafael. No conocía el concepto de Sticky footer, buscando, encontré esto en CSS Tricks: https://css-tricks.com/couple-takes-sticky-footer/ Ya probé el CSS mencionado ahí y se ve genial!

g3kdigital Eso lo intenté, y quién sabe qué cochinadas seguramente estaba haciendo yo con mi CSS, que en ciertos casos funcionaba perfectamente con 100vh y otras no, y en las que no funcionaba con 100vh sí funcionaba con 100%.

Saludos y gracias a todos.