Eu tenho o seguinte layout (estou usando o 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>

e isso (relevante)css fazendo o backup:

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

ohtml ebody elementos estão se comportando conforme o esperado. Eles preenchem suas áreas em qualquer nível ou tamanho de zoom.

No entanto, ocontainer-fluid com ofill-height classe adicionada não está fazendo o trabalho. Ele está apenas encapsulando o conteúdo e não preenchendo o fundo. Este é um problema porque é responsável por adicionarbody-film eblock-film para a página, que são apenas fundos semitransparentes para dar à coisa toda uma unidade de cores.

Aqui estão algumas capturas de tela, todas com a página reduzida, para que o conteúdo não preencha a altura:

Agora aqui está com obody elemento selecionado. Como você pode ver, ela preenche bem os pais.

Mas ocontainer-fluid não.

Comfill-height Eu tentei ambosheight emin-heighte parecem exatamente iguais.

Sua ajuda é apreciada!

Atualizar

Eu tenho tentado todas as combinações possíveis demin-height eheight nesses três elementos, e nada funciona corretamente.

height nos três trabalhos quando o conteúdo é muito pequeno para a viewport, mas quando o conteúdo é muito grande para a viewport, o bloco de conteúdo excede o limitebody inteiramente, o que significa que os filmes são muito curtos para isso.

min-height nos três, parece-me o caminho mais lógico a seguir, mas é interrompido quando o conteúdo é muito pequeno. Nesse caso, obody elemento não se estica para preencher suahtml pai.

O que está acontecendo!!!!????? Isso é um bug no novoMecanismo de modelo de chama que o Meteor usa?

Atualizar

Eu apenas tenteiheight: inherit no meufill-height, e também não funcionou. Estou realmente no fim da minha corda. Parece que deve ser tão simples.

Atualizar

Tudo bem, eu tenho uma pequena mudança para acontecer. Com issoless:

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

ofluido de recipiente agora tem altura total, mas não obody-film eblock-film que estão usando exatamente o mesmo mixin !!

Aqui está uma captura de tela, mostrando orow.body-film, qualdevemos altura total, já que ocontainer-fluid acima dela (aceite minha palavra,container-fluid agora é esticado para encher o corpo).

Observe, adicionando manualmente ofill-height aohtml declaração da linha não mudou nada, ela se comporta de forma idêntica como se estivesse simplesmente recebendo isso através dobody-film mixin.

Por que alguns elementos não respondem a todos essesmin-height demandas?

P.S., estou usando o Chrome, masé em uma máquina ubuntu, então não tenho certeza se existem inconsistências.

Responda

O seguinte acabou 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);   
}

ooverflow O atributo foi extremamente importante e é algo que não se sabia muito antes. Dando umscroll O valor para todo o corpo (o que precisava ser capaz de subir e descer) era a resposta, além de fornecer o elemento mais interno (block-film) amin-height para garantir que ele se esticasse e subseqüentemente todos os elementos pai.