Tengo el siguiente diseño (estoy usando Meteor):

<template name="headerFooter">
    <div class="container-fluid fill-height">
        {{> header}}

        {{> UI.contentBlock}}

        {{> footer}}
    </div>
</template>

<template name="home">
    {{#headerFooter}}
        <div class="row body-film">
            <div id="newsfeed" class="col-sm-offset-7 col-sm-5 block-film">
                {{#each stories}}
                    <div class="story">...</div>
                {{/each}}
            </div>
        </div>
    {{/headerFooter}}
</template>

y esto (relevante)css respaldarlo:

html {
    height: 100%;
}
body {
    min-height: 100%
} 
.fill-height {
    height: 100%;
}

loshtml ybody ambos elementos se comportan como se esperaba. Llenan sus áreas en cualquier nivel o tamaño de zoom.

sin embargo, elcontainer-fluid con elfill-height clase agregada no está haciendo el trabajo. Solo envuelve su contenido y no se llena hasta el fondo. Esto es un problema porque es responsable de agregarbody-film yblock-film a la página, que son solo fondos semitransparentes para darle a todo un poco de unidad de color.

Aquí hay algunas capturas de pantalla, todas con la página alejada para que el contenido no llene la altura:

Ahora aquí está con elbody elemento seleccionado Como puede ver, el padre llena muy bien.

Pero elcontainer-fluid no lo hace

Confill-height He intentado ambosheight ymin-height, y se ven exactamente iguales.

¡Tu ayuda es apreciada!

Actualizar

He estado probando todas las combinaciones posibles demin-height yheight en estos tres elementos, y nada funciona correctamente.

height en los tres trabajos cuando el contenido es demasiado pequeño para la ventana gráfica, pero cuando el contenido es demasiado grande para la ventana gráfica, el bloque de contenido se desbordabody completamente, lo que significa que las películas son demasiado cortas para eso.

min-height en los tres me parece el camino más lógico, pero se rompe cuando el contenido es demasiado pequeño. En este caso, elbody el elemento no se estira para llenar suhtml padre.

¿¿¿¿¿¡¡¡¡Que esta pasando!!!!????? ¿Es esto un error en el nuevoBlate utiliza plantillas para motores Meteor?

Actualizar

Acabo de intentarheight: inherit en mifill-height, y tampoco funcionó. Estoy realmente al final de mi cuerda. Parece que debería ser tan simple.

Actualizar

Muy bien, tengo un ligero cambio que sucederá. Con esteless:

.fill-height {
    min-height: 100%;
    height:auto !important; 
    height: 100%; 
}
.body-film {
    .fill-height();
}
.block-film {
    .fill-height();
}

losfluido contenedor ahora es de altura completa, pero no elbody-film yblock-film que usan exactamente el mismo mixin !!

Aquí hay una captura de pantalla que muestra elrow.body-film, cualdebería ser de altura completa, ya que elcontainer-fluid arriba está (toma mi palabra, elcontainer-fluid ahora se estira para llenar el cuerpo).

Nota, agregando manualmente elfill-height alhtml la declaración de la fila no cambió nada, se comporta de manera idéntica como si simplemente estuviera recibiendo eso a través delbody-film Mezcla

¿Por qué es que algunos elementos no responden en absoluto a todos estosmin-height ¿demandas?

P.D .: estoy usando Chrome, peroes en una máquina ubuntu, así que no puedo estar seguro si hay inconsistencias.

Responder

Lo siguiente terminó funcionando:

html, body {
    height: 100%;
}
.container-fluid {
    height: 100%;
    overflow-y: hidden; /* don't show content that exceeds my height */
}
.body-film {
    height: 100%;
    overflow-y: auto; // a value of 'scroll' will force scrollbars, even if they aren't necessary. This is cleaner.
    background-color: fadeout(@studio-bar-color, @studio-body-film-trans-delta);
}
.block-film {
    min-height: 100%;
    overflow-y: hidden; /* don't show content that exceeds my height */
    background-color: fadeout(@studio-bar-color, @studio-block-film-trans-delta);   
}

losoverflow El atributo era extremadamente clave, y es algo sobre lo que no sabía mucho anteriormente. Dando unscroll el valor para todo el cuerpo (lo que necesitaba poder moverse hacia arriba y hacia abajo) fue la respuesta, además de dar el elemento más interno (block-film) elmin-height para garantizar que se estire y, posteriormente, todos los elementos principales.