it-swarm.com.de

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 dieses (relevante) cssname__, das es sichert:

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

Die Elemente htmlund bodyverhalten sich beide wie erwartet. Sie füllen ihre Bereiche in jeder Zoomstufe oder Größe.

Der container-fluid mit der Klasse fill-height erledigt die Aufgabe jedoch 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 von body-film und block-film zur Seite verantwortlich ist, 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:

My page with nothing selected

Jetzt ist hier das Element bodyausgewählt. Wie Sie sehen, füllt es die Eltern ganz gut.

My page with body selected

Aber der container-fluid tut es nicht.

My page with container selected

Mit fill-height habe ich sowohl heightals auch min-height ausprobiert und sie sehen genau gleich aus.

Deine Hilfe wird wertgeschätzt!

Aktualisieren

Ich habe jede mögliche Kombination von min-height und heightfür diese drei Elemente ausprobiert, und nichts funktioniert ordnungsgemäß.

heightauf 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 vollständig aus dem bodynamen__ über, was bedeutet, dass die Filme zu kurz sind.

min-height auf allen drei scheint mir der logischste Weg zu sein, aber er bricht ab, wenn der Inhalt zu klein ist. In diesem Fall wird das Element bodynicht gedehnt, um das übergeordnete Element htmlzu füllen.

Was ist los!!!!????? Ist dies ein Fehler in der neuen Blaze-Template-Engine, die Meteor verwendet ?

Aktualisieren

Ich habe gerade height: inherit in meinem fill-height ausprobiert und 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 diesem lessname__:

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

Das container-fluid ist jetzt in voller Höhe, aber nicht der body-film und block-film, die genau das gleiche mixin verwenden !!

Hier ist ein Screenshot, der den row.body-film zeigt, der sollte die volle Höhe haben, da sich der container-fluid darüber befindet (nimm mein Wort, der container-fluid wird jetzt gestreckt, um den Körper auszufüllen).

The row is broken.

Beachten Sie, dass das manuelle Hinzufügen des fill-height zur html-Deklaration der Zeile nichts geändert hat. Es verhält sich genauso, als würde es dies einfach über das body-film-Mixin empfangen.

Warum reagieren einige Elemente überhaupt nicht auf alle diese min-height-Anforderungen?

PS: Ich verwende Chrome, aber es ist is auf einem Ubuntu-Computer, daher 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);   
}

Das Attribut overflowwar ein extrem wichtiger Schlüssel, und es ist etwas, über das bisher nicht viel bekannt war. Die Antwort bestand darin, dem gesamten Körper einen Wert für scrollzuzuweisen (das Ding, das sich auf und ab bewegen musste) und dem innersten Element (block-film) den min-height zuzuweisen, um sicherzustellen, dass es sich selbst und anschließend alle übergeordneten Elemente dehnte .

20
blaineh

Ich weiß, du hast gesagt, du hast jede Kombination ausprobiert, aber was ist mit:

html, body {
    height: 100%;
}
.fill-height {
    min-height: 100%;
    height:auto !important; /* cross-browser */
    height: 100%; /* cross-browser */
}

Das Problem bei der Einstellung von min-height: 100% für den Körper ist, dass height: 100% für das untergeordnete div nicht über eine korrekte übergeordnete Höhe verfügt, die referenziert werden kann, und funktioniert nicht.

BEARBEITEN:

Diese Logik gilt für alle untergeordneten Divs. In Ihrem Fall ist der Body-Film-Div also ein Kind der Behälterflüssigkeit. Da container-fluid jetzt einen min-height von 100% und keine definierte height (es ist auf auto gesetzt) ​​hat, wenn Sie body-film einen Prozentsatz für die Höhe angeben, hat es keine Referenzhöhe. MDN - CSS height und MDN - CSS min-height .

Wenn Sie also ein div mit einer Höhe oder Min-Höhe von 100% wünschen, müssen alle übergeordneten Elemente eine definierte Höhe von 100% haben, bis hin zum HTML-Tag.

Was Sie möglicherweise tun müssen, ist etwa so:

html, body {
    height: 100%;
}
.container-fluid {
    height: 100%;
    overflow-y: hidden; /* don't show content that exceeds my height */
}
.body-film {
    min-height: 100%;
    overflow-y: scroll;
}

Dies ist möglicherweise nicht die endgültige Antwort, da sie davon abhängt, was Sie genau wollen, aber hoffentlich bringt Sie das auf die richtige Spur.

24
happyjack

Obwohl dies nicht direkt mit den HTML-Größenproblemen zusammenhängt, entdeckte ich kürzlich einen viel leichteren Weg, um diese Art von "transparentem Film" zu erreichen, indem ich box-shadow verwende.

Dieser Artikel lässt sich ziemlich gut zusammenfassen. Er bietet auch andere Methoden an, aber ehrlich gesagt scheint das die einfachste zu sein.

<div class="example"></div>

.example {
    position:relative;
    width: 300px;
    height: 313px;
    box-shadow: 0px 313px rgba(255, 0, 92, 0.6) inset;
    background: url(/img.png);
}
0
blaineh