Höhe nicht 100% auf Behälter-Flüssigkeit, obwohl HTML und Körper sind

Ich habe folgendes Layout (ich benutze 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>

und dies (relevant)css Sichern:

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

Dashtml undbody Beide Elemente verhalten sich wie erwartet. Sie füllen ihre Bereiche in jeder Zoomstufe oder Größe.

Diecontainer-fluid mit demfill-height Klasse hinzugefügt erledigt den Job nicht. Es wird nur der Inhalt verpackt und nicht bis zum Ende gefüllt. Dies ist ein Problem, da es für das Hinzufügen verantwortlich istbody-film undblock-film auf die Seite, die nur halbtransparente Hintergründe sind, um dem Ganzen eine gewisse Farbeinheit zu verleihen.

Hier sind einige Screenshots, bei denen die Seite verkleinert ist, damit der Inhalt nicht die Höhe ausfüllt:

Jetzt ist es hier mit derbody Element ausgewählt. Wie Sie sehen, füllt es die Eltern ganz gut.

Aber diecontainer-fluid nicht.

Mitfill-height Ich habe beides versuchtheight undmin-heightund sie sehen genauso aus.

Deine Hilfe wird geschätzt!

Aktualisieren

Ich habe jede mögliche Kombination von versuchtmin-height undheight auf diese drei Elemente, und nichts funktioniert richtig.

height auf allen drei funktioniert, wenn der Inhalt für das Ansichtsfenster zu klein ist, aber wenn der Inhalt für das Ansichtsfenster zu groß ist, läuft der Inhaltsblock aus dem überbody ganz, was bedeutet, die Filme sind zu kurz dafür.

min-height bei allen dreien scheint mir der logischste weg zu sein, aber er bricht ab, wenn der inhalt zu klein ist. In diesem Fall ist diebody Das Element wird nicht gedehnt, um es zu füllenhtml Elternteil.

Was ist los!!!!????? Ist das ein Bug im neuenBlaze-Templating-Engine, die Meteor verwendet?

Aktualisieren

Ich habe es gerade versuchtheight: inherit in meinemfill-heightund es hat auch nicht funktioniert. Ich bin wirklich am Ende meines Seils. Das scheint so einfach zu sein.

Aktualisieren

Okay, ich habe eine kleine Veränderung vor. Mit diesemless:

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

DasBehälterflüssigkeit ist jetzt volle Höhe, aber nicht diebody-film undblock-film die verwenden genau das gleiche mixin !!

Hier ist ein Screenshot, der dierow.body-film, welchesollte volle Höhe haben, da diecontainer-fluid oben ist es (nimm mein Wort dafür, dascontainer-fluid wird jetzt gedehnt, um den Körper zu füllen).

Beachten Sie, dass Sie das manuell hinzufügenfill-height zumhtml Die Deklaration der Zeile hat nichts geändert, sie verhält sich genauso, als würde sie das einfach über das empfangenbody-film mixin.

Warum reagieren einige Elemente überhaupt nicht auf alle diesemin-height Forderungen?

PS: Ich verwende Chrome, aber esist auf einem Ubuntu-Computer, so kann ich nicht sicher sein, ob es Inkonsistenzen gibt.

Antworten

Folgendes funktionierte am Ende:

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);   
}

Dasoverflow Attribut war extrem wichtig, und es ist etwas, das vorher nicht viel wusste. Geben ascroll Wert für den gesamten Körper (das Ding, das sich auf und ab bewegen musste), war die Antwort und gab das innerste Element (block-film) dasmin-height um sicherzustellen, dass es sich und anschließend alle übergeordneten Elemente dehnte.