• Macuspana, Tabasco, México
  • lopez_felix_23@hotmail.com

(55) 8575 50 90

Awesome Image

Div que se adapte a la pantalla de el navegador.

Cuando queremos hacer un blog, o cualquier otro contenido para una pagina web, a veces tenemos el problema que el contenido de el post, no es lo suficiente para que éste ocupe todo el alto de nuestro monitor en donde la estemos visualizando y por lo consiguiente el Footer de la página se sube a el contenido y no se queda en la parte de abajo, esto se puede corregir con css y tomando siempre la referencia de que el alto de el elemento padre siempre ocupe el 100%.

La siguiente imagen muestra un ejemplo de el contenido, que como se muestra, como no es mucho texto y no tiene imagen, por ende el footer se sube a el contenido, quedando el espacio en blanco de abajo, esto no se ve bien en una pagina web.

Para iniciar este ejemplo vamos a crear una estructura básica de html, y un archivo de css para este ejemplo.

Estructura de el archivo css con lo básicos.

html, body {
	margin:0;
	padding:0;
	border:0;
	outline:0;
    font-size:100%;
    font: 13px/1.65em "HelveticaNeue"
    color: #444;
    background: #ededed none repeat scroll top left;
    font-size: 13px;
	vertical-align:baseline;
	background:transparent;
    height: 100%;  
}


.flex-container {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.content{
    max-width: 1042px;
}

h2{
    text-transform: uppercase;
    font-size: 12px;
    font-weight: bold;
}


h1{
    text-transform: uppercase;
    font-size: 14px;
    font-weight: bold;
}

header{
    height: 300px;
    background-color: green;
    text-align: center;
}

section{
    background-color: orange;
    align-content: center;
    text-align: center;
}

footer{
    height: 200px;
    background-color: red;
    align-content: center;
    text-align: center;
}

Estructura de el archivo HTML, y la importación de su estilo.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Example page </title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="main.css" />
</head>
<body>

<div class="flex-container">


        <header> 
            <h2> Header </h2> 
        </header>

        <section> 
            <h1> Section </h1>

            <p>Lorem ipsum dolor sit, recusandae magnam ipsam nihil eligendi quidem.
            </p>

        </section>

        <footer> 
            <h2> Footer </h2>  
        </footer>

    
    
</div>
    
</body>
</html>

La pieza clave de este modalidad es que siempre los elementos padres ocupen el 100% de el alto, por ejemplo el div con la clase flex-container este es el elemento padre de de todo la pagina, y debe de ocupar el 100% de alto, e igualmente las etiquetas body y el html.

<div class="flex-container">


        <header> 
            <h2> Header </h2> 
        </header>

        <section> 
            <h1> Section </h1>

            <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. 
            </p>

        </section>

        <footer> 
            <h2> Footer </h2>  
        </footer>

    
</div>

Los hijos de este componente son: header, section, y el footer, como se muestra arriba en el código.

Vamos a poner atención en las etiquetas header, footer y vamos a dejar section pendiente para analizarlo más a delante. En estas etiquetas vemos que su clase css tienen un alto estático como se muestra a continuación:

header{
    height: 300px;/* <--  Poner atencion aquí */ 
    background-color: green;
    text-align: center;
}

footer{
    height: 200px; /* <--  Poner atencion aquí */ 
    background-color: red;
    align-content: center;
    text-align: center;
}

El total de el alto entre el la etiqueta header y footer es igual a 500px, tener mucho en cuenta este valor. Es hora de analizar la etiqueta section y también su clase css:

<section> 
   <h1> Section </h1>

       <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit.</p>

</section>
section{
    background-color: orange;
    align-content: center;
    text-align: center;
}

 

Aquí es donde va la "magia", 'en su clase css', si miramos bien su código es igual a como inicialmente se inicio hasta ahora no hay nada extraño.

vamos a usar una propiedad min-height que: 'se utiliza para definir la altura mínima de un elemento dado. Impide que el valor de la propiedad height llegue a ser más pequeña que la especificada en la altura mínima ( min-height ).' y La función CSS calc(): 'puedes realizar cálculos para determinar valores de propiedades CSS.'

Lo que vamos hacer es ajustar siempre el alto de la pagina a todo el contenido que se tenga y que ocupe el 100% de alto.

Recuerdas que anteriormente sacamos la suma de el alto total de el header y footer donde nos dió un total de 500px!, este valor lo vamos a usar, para la funcion CSS calc(). Tambien recuerdas que el alto de el elemento padre "flex-container" en su css es de 100%, muy bien ahora proceguimos a realizar el calculo.

 

Lo primero que tenemos que hacer es restarle a el elemento padre los pixeles que se están usando los hijos, como (header, footer y dejamos fuera a section, ya que este es el que va a usar el resto del alto para toda nuestra página). Entonces restamos a el elemento padre que es el 100%, la suma de el alto de header y footer (500px), (100% - 500px).

 

Dando como resultado el alto dinámico de la etiqueta 'section' que es el que queremos que ocupe todo el resto de el alto para nuestra página.

Así quedaria el css:

section{
    background-color: orange;
    align-content: center;
    text-align: center;
    min-height: calc(100% - 500px);
}

CSS ya con el cambio a plicado:

html, body {
	margin:0;
	padding:0;
	border:0;
	outline:0;
    font-size:100%;
    font: 13px/1.65em "HelveticaNeue"
    color: #444;
    background: #ededed none repeat scroll top left;
    font-size: 13px;
	vertical-align:baseline;
	background:transparent;
    height: 100%;  
}


.flex-container {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.content{
    max-width: 1042px;
}

h2{
    text-transform: uppercase;
    font-size: 12px;
    font-weight: bold;
}


h1{
    text-transform: uppercase;
    font-size: 14px;
    font-weight: bold;
}

header{
    height: 300px;
    background-color: green;
    text-align: center;
}

section{
    background-color: orange;
    align-content: center;
    text-align: center;
    min-height: calc(100% - 500px);/* <--  */ 
}

footer{
    height: 200px;
    background-color: red;
    align-content: center;
    text-align: center;
}

Y la página ya actualizada.

Con este podemos hacer que siempre nuestro alto de nuestra web simpre ocupe el 100% de nuestro monitor.

Saludos........

Awesome Image

Elder Lopez Felix

Backend Developer | Python / Django - Javascript / AngularJs / Angular - 5

Comentarios (0)