Código de CSS - El ultimo div ocupa el 100% de altura restantes de la ventana

Pos: 4

Val: 560

Ha mantenido su posición en CSS (en relación al último mes)

El ultimo div ocupa el 100% de altura restantes de la ventana

CSS

Publicado el 4 de Julio del 2019 por Xavi (548 códigos)

4.209 visualizaciones desde el 4 de Julio del 2019

Este simple código muestra como poner el ultimo <div> ocupando el resto de altura de la pantalla.

ultimo-div-ocupa-toda-la-altura-restante

Versión 1.0

Publicado el 4 de Julio del 2019

4.210 visualizaciones desde el 4 de Julio del 2019

height: 100% - Definimos el 100% de altura para el body y html
display: flex - Habilitamos el flexbox en el contenedor
flex-direction: column - Establecemos la dirección de los elementos flex de arriba hacia abajo
flex-grow: 1 - el flexbox aplicará el espacio disponible restante del contenedor al último elemento

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <style>

    html,

    body {

        height: 100%;

        margin: 0;

    .container {

        height: 100%;

        display: flex;

        flex-direction: column;

    .container > div {padding:10px;}

    .container > div:last-child {

        background-color: tomato;

        flex: 1;

    </style>

</head>

<body>

<div class="container">

    <div>Div 1</div>

    <div>Div 2</div>

    <div>Div 3</div>

</div>

</body>

</html>

Comentarios sobre la versión: Versión 1.0 (0)

No hay comentarios

Comentar la versión: Versión 1.0

http://lwp-l.com/s5398

Tags:
flex
altura

Centrar un texto horizontal y vertical en un div

Reveal OnScroll

Código de CSS - El ultimo div ocupa el 100% de altura restantes de la ventana

Versión 1.0

Comentarios sobre la versión: Versión 1.0 (0)

Comentar la versión: Versión 1.0

Tienes que ser un usuario registrado para poder insertar imágenes, archivos y/o videos.