Flexbox, absolute Positionierung und 100% Höhe

Ich habe ein kleines problem beim Herumspielen mit einer flexbox-innen eine absolute box, die innerhalb einer definierten Höhe div (erkläre ich auf dem Weg).

First off, hier ist ein Turnschuh, meine demo ist, ist es möglicherweise einfacher, das problem zu erfassen:
https://jsfiddle.net/8ub9tyub/

Wie Sie sehen können, wenn Sie bewegen Sie den block, text angezeigt, der von unten aber nicht ganz zeigen voll.

Ich habe ein main-div (nennen wir es $main) für den hover-Teil 600x250px mit einem overflow: hidden, und innen, zwei divs: Titel und text (sagen $Titel und $text), die nach einem anderen (regelmäßiger).

$Titel können manchmal bis zwei Zeilen, also die Höhe auf auto gesetzt.
$text ist zu 100% Höhe, positioniert die relativen und auf display: flex. Im inneren ist ein weiteres div ($intro) positionierte ich im absoluten, mit einem top: 100% (Schalter auf 0, wenn schwebte) und einem align-self: flex-end werden kann, um es an der Unterseite der $main. (dies ist zu halten Sie den text aus, hängt an den Titel - ich mag es zu atmen)

Die Struktur geht so, im Grunde:

<div class="main">
 <div class="title">I'm a title!</div>
 <div class="text">
  <div class="intro"><p>Just a bunch of long paragraphs of text</p></div>
 </div>
</div>

Nun, wie Sie sehen können auf meiner demo $text's Höhe ist auf 100% eingestellt, aber ich dachte, die Höhe zu sein, $main minus $Titel's Höhen, aber hier scheint es nur $main's Höhe, das macht die $text block overflow und so, wenn ich bewegen Sie den block, um den text angezeigt wird, sperrt er den Boden außerhalb $main und schneidet einen Teil des Textes.

Hätte irgendjemand eine Ahnung hat wie ich das machen kann $text die erwartete Höhe, zu wissen, ich kann nicht Vorhersagen, $Titel's Höhe (und somit nicht verwenden kann calc(), zumindest für die, wie ich weiß) und ich will nicht, JavaScript zu verwenden, in irgendeiner Weise?

Sie gotta love die Fragen mit broken links. Bitte BITTE immer einen link zu etwas wie jsfiddle/plnkr/codepen/etc... So wird es zumindest dort zu bleiben.
Recht hast du! Sorry, weil so spät, aber ich aktualisiert die post mit einem link zu ein Turnschuh " statt. Danke für den Aufruf mich auf diese, ich Schätze es.

InformationsquelleAutor chriskirknielsen | 2014-12-06

  1. 0

    So let me get this straight haben Sie:

    <div class='main'>
    <div class='title'>
        <div class='text'></div>
    </div>
</div>

    Festlegen und die Höhe des div - text auf 100% setzt es auf die Höhe der main obwohl es innen div Titel. Ich denke, das problem könnte sein, dass Sie nicht angeben, die Höhe von .Titel in Ihrem CSS. Wenn Sie nicht geben Sie die Höhe der Titel-div, dann wird der text division wird auf die Höhe des Haupt-div.

    Wieder nur eine Vermutung aber überprüfen.

    Hey, vielen Dank für das ansehen! Nein, eigentlich Titel und text sind Geschwister (ich habe die Struktur in meinem post oben). Wie gesagt, Titel stufenlose Höhenverstellung, so kann ich nicht geben Sie einen festen Wert. Sie sind Recht, obwohl. Ich versucht, indem Sie eine Höhe in Pixel und es sieht aus wie es funktioniert. Sowieso, dies zu umgehen? Mit variabler Höhe für Titel ich kann nicht verwenden, die Lösung, die ich fürchte.
    Hmm schwer problem, herauszufinden, wie Sie zu beheben. Sicher nicht.
    Dank für das schauen in es. In dieser situation, die ich denke, ich werde entweder JS oder flexboxes.

    InformationsquelleAutor Tai Kwangi Chicken

Schreibe einen Kommentar