es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

  • es.davy.ai/
  • Programación /
  • Expandir la fila de la cuadrícula para utilizar el espacio libre dejado por una fila de altura máxima.

Expandir la fila de la cuadrícula para utilizar el espacio libre dejado por una fila de altura máxima.

28 Jul, 2023 Programación

Dado un cuerpo de cuadrícula y estas 3 paneles:

┌───┬───┐
│   │ B │
│ A ├───┤
│   │ C │
└───┴───┘

Estoy tratando de hacer que las columnas A y B/C ocupen el 50% del ancho de la ventana; A ocupe el 100% de la altura de la ventana, B ocupe el 60% y C el 40%.
Pero también quieo que C tenga una altura máxima de su “contenido máximo”, y que B ocupe el espacio restante si el “contenido máximo” de C es menor a 40%.
Todas las paneles tienen “overflow-y: auto” y A y B siempre tienen contenido que se puede desplazar.

Entonces, comenzando con esto

body {
    display: grid;
    grid-template-columns: 50% 50%;
    grid-template-rows: 60% 40%;
}
.a {
    grid-row: 1 / 3;
}

que funciona aparte para la parte de la “altura máxima” de C, intenté reemplazar “grid-template-rows” con “60% minmax(40%, max-content)”, o incluso usar una altura fija (por ejemplo “16em”) en lugar de “max-content” (“minmax(60%, calc(100% – 16em)) minmax(40%, 16em)”), pero definitivamente estoy omitiendo algo aquí.

Tags:  ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para lograr el diseño deseado, puedes modificar el código CSS de la siguiente manera:

    body {
  display: grid;
  grid-template-columns: 50% 50%;
  grid-template-rows: 100vh 60vh minmax(0, max-content);
}

.a {
  grid-row: 1 / 4;
  overflow-y: auto;
}

.b {
  height: 60vh;
  overflow-y: auto;
}

.c {
  height: 40vh;
  overflow-y: auto;
  max-height: max-content;
}

    Explicación:

    • Usa 100vh para la altura de A y 60vh para B para cumplir con el requisito inicial.
    • Usa minmax(0, max-content) para C para permitir que su altura crezca según sea necesario.
    • Asigna grid-row: 1 / 4 a A para abarcar las tres filas.
    • Agrega overflow-y: auto a todos los paneles para habilitar el desplazamiento cuando sea necesario.
    • Establece las alturas con valores fijos para B y C para cumplir con los requisitos.
    • Usa max-height: max-content para C para permitir que su altura se reduzca si su contenido es menor a 40vh.
    • Elimina minmax(60%, calc(100% - 16em)) porque entra en conflicto con los 100vh de altura para A.

    Esto debería producir el diseño deseado con las columnas A y B/C ocupando el 50% del ancho de la ventana, A y B siempre desplazables, C teniendo una altura fija o dinámica dependiendo de su contenido, y B ocupando el espacio restante si el contenido de C es menor a 40vh.

Comments are closed.