Fabrikat div fit Resthöhe

Question

Ich habe folgende divs

<div class="top"> 
    <div class="inner1"></div> 
    <div class="inner2"></div> 
    <div class="inner3"></div> 
</div> 

Hier ist die CSS:

.top { 
    height: 100vh; 
} 

.div1 { 
    min-height: 215px; 
    box-sizing: border-box; 
    height: 30vh; 
} 

.div2 { 
    box-sizing: border-box; 
    min-height: calc(100vh - 30vh - 265px); 
    padding-top: 2.5em; 
    margin-top: 0; 
    display: table; 
} 

.div3 { 
    min-height: 265px; 
    box-sizing: border-box; 
    background: white; 
    display: table; 
    width: 100%; 
    font-weight: 700; 
    padding-bottom: 42px; 
} 

Ich will nicht berechnet verwenden (100vh - 30vh - 265px) die min einstellen -Höhe von Div 2. Wie kann ich es haben, so dass es die verbleibende Höhe (div2 Höhe = 100vh - Div1 Höhe - Div2 Höhe.

Ich denke, Flex könnte hier nützlich sein, aber ich bin nicht ziemlich sicher, wie man es benutzt.Alle Hilfe wäre g sehr geschätzt.

Danke?

Bevor Sie dies als Duplikat markieren, beachten Sie bitte: Ich habe versucht mit flex und es funktioniert nicht gut in IE11.

Answer 1

Ich weiß nicht, ob es die beste Idee ist, aber um Cross-Browser-Beschränkungen zu überwinden, verwende ich normalerweise Javascript, um das neu zu berechnen. Ich schreibe JavaScript-Funktion und feuere dann auf Fenstergröße und Last.

// some jQuery 
 
function adjustHeight() { 
 
var fullHeight = $(window).height(); 
 

 
var neededHeight = fullHeight - fullHeight*0.3 - 263; 
 

 
$('.div2').css('min-height', neededHeight + 'px'); 
 

 
} 
 

 

 
$(document).ready(function(){ adjustHeight(); });

Answer 2

neben flex, display: table Eigenschaften könnten auch für ältere Browser unterstützen.

in diesem Fall Höhe dreht min-height

.top { 
 
    height: 100vh; 
 
    display: table; 
 
    width: 100%; 
 
} 
 
.top>div { 
 
    display: table-row; 
 
} 
 
.inner1 { 
 
    min-height: 215px;/* becomes useless */ 
 
    box-sizing: border-box; 
 
    height: 30vh; 
 
    background: tomato; 
 
} 
 
.inner2 { 
 
    box-sizing: border-box; 
 
    padding-top: 2.5em;/* i'll get squeezed here */ 
 
    margin-top: 0;/* useless, border-spacing is to be used */ 
 
    background: turquoise; 
 
} 
 
.inner3 { 
 
    height: 265px; 
 
    box-sizing: border-box; 
 
    background: yellow; 
 
    display: table; 
 
    width: 100%; 
 
    font-weight: 700; 
 
    padding-bottom: 42px;/* ? :) */ 
 
}

<div class="top"> 
 
    <div class="inner1">1</div> 
 
    <div class="inner2">run me in full page to see how i behave :)</div> 
 
    <div class="inner3">3</div> 
 
</div>