Calendario de altura completo con Bootstrap 4 tabla

Question

Estoy tratando de crear un calendario usando una tabla bordeada Bootstrap 4 que toma el 100%vh, tiene cada fila el mismo ancho pero una altura diferente para el encabezado (que contiene los días de la semana). https://codepen.io/GeoHurdle/pen/ZEpyzLZ Sun Mon Tue Wed Thu Fri Sat 1 2 3 4 5 6 7 8 9 10 11 12 13 14 html, body { overflow-y: hidden; } .table [class^='col-'] { flex-shrink: 1; } tr { height: calc(100vh / 3); }

pixelprodigy · Accepted Answer

En lugar de la tabla si utiliza el diseño de la red, puede hacerlo más fácilmente

html, body {
        height: 100%;
        margin: 0;
        }
        .wrapper {
        border: 1px solid blue;
        height: 100%;
        padding: 10px;
        }

        .grid {
        width: 100%;
        height: 100%;
        display: grid;
        grid-template-columns: auto auto auto auto auto auto auto;
        grid-template-rows: 50px auto auto;
        row-gap: 7px;
        }

        .grid>div {
        width: 100%;
        height: 100%;
        border: 1px solid;
        background-color: rgba(255, 255, 255, 0.8);
        font-size: 30px;
        display: flex;
        justify-content: center;
        align-items: center;
        }

Respondida el Dec 17, 2020 a las 20:12 - por pixelprodigy

logicloom · Answer

Ya hay una discusión sobre por qué no utilizar tablas para el diseño en HTML. Si tienes que usar la tabla Bootstrap para estructurar el calendario, entonces puedes ignorar mi respuesta, o simplemente borrarla.

Si quieres ver cómo se puede hacer en flexbox, sigue leyendo.

Estructura

Sólo mirando su código fuente, puedo decir que hay 3 secciones principales en su calendario. Así que primero los estructuraría como sigue:

Uno de sus requisitos es que desea que el calendario tome el 100% de la altura de la vista.

No es difícil hacerlo a través de CSS/SCSS:

.calendar {
    height: 100vh;
}

Supongo que la parte difícil es cómo hacer los días en days sección para rellenar automáticamente los huecos, sin fijar alturas fijas en month-selection y days-of-week sección.

El truco que tuve es que tengo la pantalla del calendario como flexbox, y puse su flujo a la columna, y sólo fijé la altura de days sección al 100%. Sí, days sección tratará de fijar la altura de uno mismo al 100% del cuerpo HTML, pero ya que es un niño de un flexbox, se reducirá (por defecto) a ocupar sólo espacio disponible! (si fluye como columna es difícil de imaginar, piensa en el flujo de fila)

.calendar {
    height: 100vh;
    display: flex;
    flex-flow: column nowrap;

    .days {
        height: 100%;
    }
}

Mientras tanto days sección está ocupando el resto del espacio disponible, más tarde cuando nos estilo cada día individual, ¡podríamos ajustar automáticamente sus alturas!

Altura de cada día

Otra pregunta sería cómo ajustar automáticamente la altura de cada caja del día en days sección para que tomen el resto de espacios.

¡Bueno cree o no, es súper fácil con flexbox!

Lo único que necesitas hacer, al lado de la configuración days sección como flexbox, es para establecer align-items a stretch (que es incluso el defecto)!

.days {
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-start;
    align-items: stretch;
    height: 100%;

    ...
}

Captura

demo: https://jsfiddle.net/davidliang2008/uc4stzp5/107/

Respondida el Dec 17, 2020 a las 20:18 - por logicloom

Gpt · Answer

El problema que estás experimentando es que la altura de las filas de la tabla no se está distribuyendo correctamente en relación con la altura total de la ventana (viewport height). En tu código, estás intentando establecer la altura de las filas con la propiedad CSS height: calc(100vh / 3);, pero esta propiedad no está aplicada correctamente a las filas de la tabla debido a que no se especifica cómo deseas que se aplique la altura.

Una posible solución para lograr un calendario con filas de altura diferente y tabla bordeada en Bootstrap 4 es la siguiente:

En este código, he eliminado la clase d-flex de las filas de la tabla ya que puede causar problemas con la distribución del espacio. En su lugar, he agregado estilos en línea en las filas (<tr>) para especificar la altura deseada, de esta manera puedes definir diferentes alturas para cada fila. También he quitado la propiedad overflow-y: hidden; del CSS ya que puede restringir el desplazamiento vertical necesario en este caso.

Prueba este código y ajusta las alturas según tus necesidades para lograr el diseño deseado de un calendario con filas de altura diferente utilizando una tabla Bootstrap 4.

Respondida el Dec 18, 2020 a las 20:13 - por Gpt

Gemini · Answer

Para lograr que el encabezado del calendario tenga una altura diferente a las filas del cuerpo, puedes utilizar la siguiente modificación en el CSS:

css
tr:first-child {
  height: calc(100vh / 3);
}

tr:not(:first-child) {
  height: calc((100vh / 3) - 10px);
}

El 10px en calc((100vh / 3) - 10px) es un margen para compensar el borde de la tabla.

Aquí tienes el código completo actualizado:

css
html,
body {
  overflow-y: hidden;
}

.table [class^='col-'] {
  flex-shrink: 1;
}

tr:first-child {
  height: calc(100vh / 3);
}

tr:not(:first-child) {
  height: calc((100vh / 3) - 10px);
}

También eliminé la clase table-responsive que ya no es necesaria para este diseño.

Respondida el Dec 18, 2020 a las 20:23 - por Gemini

Calendario de altura completo con Bootstrap 4 tabla

4 Respuestas:

Estructura

Altura de cada día

Captura