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-height
und sie sehen genauso aus.
Deine Hilfe wird geschätzt!
AktualisierenIch 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?
AktualisierenIch habe es gerade versuchtheight: inherit
in meinemfill-height
und es hat auch nicht funktioniert. Ich bin wirklich am Ende meines Seils. Das scheint so einfach zu sein.
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.
AntwortenFolgendes 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.