0

Estoy tratando de acomodar dos div que están dentro de un div en forma de columna, y de paso que estos ocupen el espacio restante de este.

menu

Por ejemplo el div principal es el de color azul, el cual ocupa el espacio como tal que le otorgue, dentro del están, el div de color rojo el cual tiene el icono, y el de color verde que tiene el texto.

La idea es que el verde, quedo en el fondo de este div, osea en el bottom y del ancho del div del color azul, y el rojo ocupe el espacio restante, tanto hacia arriba como hacia abajo y a los lados, sin que afecte el tamaño original del azul.

html

<div class="container">

          <!--Fila Uno-->

          <div class="cell-row cell-row-1">

            <div class="cell-1 color-novedad">
              <a href="#/perfilestu">
                <div>
                  <div class="color-segundo"><i class="ion-ios-person-outline"></i></div>
                  <div class="color-prueba">Perfil</div>
                </div>
              </a>
            </div>

            <div class="cell-2">
              <a href="#/horarioestu">
                <div>
                  <div><i class="ion-ios-time-outline"></i></div>
                  <div>Horario</div>
                </div>
              </a>
            </div>

          </div>
</div>

CSS

html,
body,
.scroll
/* because the <ion-content> content is placed inside a div.scroll */

{
    height: 100%;
}

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

.container > .cell-row {
    flex: 1;
    display: flex;
}

.cell-row > div {
    flex: 1;
    flex-grow: 1;
    color: dimgrey;
    /* Flex for these containers (cells) */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    flex-direction: column;
}

.color-prueba{
    background-color: green;
    flex: 0 0 25px 100%; 
    width: 100%;
}

.color-segundo{
    background-color: red;
    flex: 1 100%; 
    width: 100%;
}

.color-novedad{
    background-color: blue;
}

.container i[class^="ion-"] {
    font-size: 90px;
}

1 respuesta 1

2

El elemento .color-novedad no tiene mucho sentido que sea flex ya que dentro tiene un elemento a que a su vez tiene un elemento div el cual es donde están las cajas que deseas acomodar.

.color-novedad {
  display: block;
}

Segundo, tanto al elemento a como div debes darle un alto del 100% para que ocupen el alto del padre.

.color-novedad > a,
.color-novedad > a > div {
  height: 100%;
  width: 100%;
}

Tercero, hay que hacer flexible el elemento .color-novedad > a > div con orientación vertical; esto nos ayudará a que .color-segundo se estire.

.color-novedad > a > div {
  display: flex;
  flex-direction: column;
}

Cuarto, le damos flex: 1 a .color-segundo, para que ocupe el espacio restante.

.color-novedad .color-segudo {
  flex: 1;
}

Finalmente, le damos un flex-basis de 35px de alto a .color-prueba y un line-height de igual cantidad para que el texto de centre verticalmente.

.color-novedad .color-prueba {
  flex: 0 0 35px;
  line-height: 35px; /* centrado vertical */
}

Al darle flex: 0 0 35px a .color-prueba, hacemos que solo ocupe 35px del espacio total del contenedor flexible y, además, con flex: 1 en .color-segundo le decimos que ocupe «el espacio restante».

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.