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........

Elder López Félix

Elder López Félix

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

@Elderl23

0 Comentarios

Error message here!

Error message here!

Hide Error message here!

¿Perdiste tu contraseña? Por favor, introduzca su dirección de correo electrónico. Recibirás un enlace para crear una nueva contraseña.

Error message here!

Back to log-in

Close