Machen Sie Kindelement 100% Höhe des übergeordneten Max-Höhe

Question

Ich arbeite an einem modalen Layout und kämpfen, um Höhe Kontext von einem übergeordneten Element zu seinem untergeordneten Element übergeben. Werfen Sie einen Blick auf this CodePen, .child-child muss die gleiche Höhe wie .child sein.

Eine Lösung hierfür ist die Änderung max-height: 50%; zu height: 50%;; Dies ist nicht verwendbar, da das Modal manchmal nicht so viel Inhalt enthält und nur so hoch wie der Inhalt sein sollte. Wenn es viel Inhalt gibt, dann sollte es nicht max-height überschreiten.

Eine andere Lösung ist für Flexbox und Einstellung .child als Flex-Container, die .child-child volle Höhe setzen, die Flex-Container standardmäßig tun; Sie können das in Aktion in this CodePen sehen. Das funktioniert in den meisten Browsern sehr gut und macht genau das, was ich brauche, scheitert aber vollständig in IE10/11 +; Beachten Sie, dass ich Autoprefixer in den CodePen-Einstellungen verwende, also bezweifle ich, dass dies ein Flexbox-Syntaxproblem sein wird. Vielleicht muss ich einige andere Flex-Eigenschaften für IE wie flex-grow/flex-shrink usw. hinzufügen. Ich habe eine Reihe von verschiedenen Kombinationen mit nicht viel Glück versucht, ich kann auch nicht scheinen, diesen spezifischen Fehler mit Google entweder zu finden.

Jede Hilfe würde sehr geschätzt werden!

Answer 1

Ich denke, dass die einzige Möglichkeit Lösung macht .Child scrollale mit Überlauf-y: scroll ;.

Meine Demo.

.parent { 
    position: absolute; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    background: red; 
} 

.child { 
background: blue; 
max-height: 50%; 
max-width: 600px; 
width: 100%; 
position: absolute; 
    top: 50%; 
left: 50%; 
transform: translate(-50%, -50%); 
padding: 20px; 
overflow-y:scroll; 
} 

.child-child { 
background: green; 
    height: 100%; 
overflow: auto; 
} 
<div class="parent"> 
     <div class="child"> 
    <div class="child-child"> 
     <p>Blah.</p> 
     <p>Blah.</p> 
     <p>Blah.</p> 
     <p>Blah.</p> 
     <p>Blah.</p> 
     <p>Blah.</p> 
     <p>Blah.</p> 
     <p>Blah.</p> 
     <p>Blah.</p> 
     <p>Blah.</p> 
     <p>Blah.</p> 
     <p>Blah.</p> 
     <p>Blah.</p> 
     <p>Blah.</p> 
     <p>Blah.</p> 
     <p>Blah.</p> 
     <p>Blah.</p> 
    </div> 
    </div> 
</div> 

bearbeiten Wenn Sie die Taste können Sie setzen wollen, aber Sie müssen Position: relative und Position .child: auf den Knopf befestigt ist;

Funktionierende DEMO.

Bearbeiten Wenn Sie den Buttom auf der rechten Seite positionieren möchten, müssen Sie rechts: calc ((100% - 600px)/2) ;.

Funktionierende DEMO.

P.S. Siehe calc() Browser-Unterstützung dort.

Answer 2

Ich denke, dass die einzige Möglichkeit Lösung macht .child scrollt mit overflow-y:scroll;.

Meine Demo.

.parent { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    background: red; 
 
} 
 

 
.child { 
 
    background: blue; 
 
    max-height: 50%; 
 
    max-width: 600px; 
 
    width: 100%; 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate(-50%, -50%); 
 
    padding: 20px; 
 
    overflow-y:scroll; 
 
} 
 

 
.child-child { 
 
    background: green; 
 
    height: 100%; 
 
    overflow: auto; 
 
}

<div class="parent"> 
 
    <div class="child"> 
 
    <div class="child-child"> 
 
     <p>Blah.</p> 
 
     <p>Blah.</p> 
 
     <p>Blah.</p> 
 
     <p>Blah.</p> 
 
     <p>Blah.</p> 
 
     <p>Blah.</p> 
 
     <p>Blah.</p> 
 
     <p>Blah.</p> 
 
     <p>Blah.</p> 
 
     <p>Blah.</p> 
 
     <p>Blah.</p> 
 
     <p>Blah.</p> 
 
     <p>Blah.</p> 
 
     <p>Blah.</p> 
 
     <p>Blah.</p> 
 
     <p>Blah.</p> 
 
     <p>Blah.</p> 
 
    </div> 
 
    </div> 
 
</div>

P. S. Wenn Sie die Auffüllung beibehalten möchten, müssen Sie overflow-y:scroll; auf einen untergeordneten Container anwenden.

bearbeiten Wenn Sie die Taste setzen Sie können, aber Sie müssen position:relative-.child und position:fixed auf die Schaltfläche eingestellt;

Arbeiten DEMO.

bearbeiten Wenn Sie den Buttom auf rechts positionieren wollen, müssen Sie right:calc((100% - 600px)/2); verwenden.

Arbeiten DEMO.

P.S. siehe calc() Browserunterstützung there.

Answer 3

Ist das wonach Sie suchen?

$(document).ready(function() { 
 
    $('.plus-btn').on('click', function() { 
 
    $(this).closest('.parent').toggleClass('active'); 
 
    }); 
 
});

*{ 
 
    box-sizing: border-box; 
 
} 
 
.parent { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    background: red; 
 
} 
 
.top-right { 
 
    position: absolute; 
 
    top: 0; 
 
    right: 0; 
 
} 
 
.plus-btn { 
 
    overflow: hidden; 
 
    position: relative; 
 
    cursor: pointer; 
 
    width: 20px; 
 
    height: 20px; 
 
    display: inline-block; 
 
    background: #f0f0f0; 
 
} 
 
.plus-btn span { 
 
    position: absolute; 
 
    margin: 45% 10%; 
 
    width: 80%; 
 
    height: 10%; 
 
    background: #222; 
 
    border-radius: 4px; 
 
    pointer-events: inherit; 
 
    -webkit-transition: -webkit-transform .3s; 
 
    transition: transform .3s; 
 
} 
 
.plus-btn span:first-child { 
 
    -webkit-transform: rotate(0deg); 
 
    transform: rotate(0deg); 
 
} 
 
.plus-btn span:last-child { 
 
    -webkit-transform: rotate(90deg); 
 
    transform: rotate(90deg); 
 
} 
 
.parent.active .plus-btn span:first-child { 
 
    -webkit-transform: rotate(-45deg); 
 
    transform: rotate(-45deg); 
 
} 
 

 
.parent.active .plus-btn span:last-child { 
 
    -webkit-transform: rotate(45deg); 
 
    transform: rotate(45deg); 
 
} 
 
.child { 
 
    background: blue; 
 
    max-height: 50vh; 
 
    max-width: 600px; 
 
    width: 100%; 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate(-50%, -50%); 
 
    padding: 20px; 
 
} 
 

 
.child-child { 
 
    background: green; 
 
    overflow-y: auto; 
 
    width: 100%; 
 
    height: 100%; 
 
    max-height: 0; 
 
    -webkit-transition: max-height .3s; 
 
    transition: max-height .3s; 
 
} 
 
.parent.active .child-child { 
 
    max-height: calc(50vh - 40px); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="parent"> 
 
    <div class="child"> 
 
    <div class="top-right"> 
 
     <div class="plus-btn"> 
 
     <span></span> 
 
     <span></span> 
 
     </div> 
 
    </div> 
 
    <div class="child-child"> 
 
     <p>Blah.</p> 
 
     <p>Blah.</p> 
 
     <p>Blah.</p> 
 
     <p>Blah.</p> 
 
     <p>Blah.</p> 
 
     <p>Blah.</p> 
 
     <p>Blah.</p> 
 
     <p>Blah.</p> 
 
     <p>Blah.</p> 
 
     <p>Blah.</p><p>Blah.</p> 
 
     <p>Blah.</p> 
 
     <p>Blah.</p> 
 
    </div> 
 
    </div> 
 
</div>