La altura no es del 100% en el fluido del contenedor a pesar de que html y body son
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!
ActualizarHe 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?
ActualizarAcabo de intentarheight: inherit
en mifill-height
, y tampoco funcionó. Estoy realmente al final de mi cuerda. Parece que debería ser tan simple.
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.
ResponderLo 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.