Stretch (vertikal) Mitteldiv zwischen den beiden anderen

Gibt es eine Möglichkeit, Mitteldiv zu dehnen, füllen Sie den verbleibenden Raum zwischen den anderen beiden (Kopf, Fuß) mit begrenzten Höhen. Alle drei sind innerhalb eines Elternelements angeordnet, das 100% eines Darstellungsbereichs abdeckt. Die Bedingungen sind alle drei Divs müssen relativ zu seinem Inhalt sein, aber mit Grenzen (max-height) (außer dem mittleren), also keine absolute Positionierung; Sie müssen dasselbe Elternelement haben. Ich habe zwar gefunden, dass die ähnliche problem gelöst, aber es wurde eine Tabellenstruktur verwendet, die nicht das ist, was ich suche, aber genau das gleiche Verhalten habe, das ich auf mein Konzept anwenden möchte.Stretch (vertikal) Mitteldiv zwischen den beiden anderen

Hier ist die codepen, aber ich habe nicht herausgefunden, wie es noch zu lösen. Und noch eins, ich möchte JS nicht benutzen.

UPDATE auch ohne flexbox, calc(), tables;

Quelle

2016-04-25 Sébastien

in Ihrem CSS ist eine Menge Zeug ... Ich verstehe nicht 100%, was Sie tun möchten, wenn Ihr Elternteil div 100vh dann ist, wenn Sie den ersten eine Höhe geben und den letzten eine Höhe, die Sie gerade haben dem mittleren 100% nein geben? – DanyCode

@DanyCode Wenn ich dem mittleren 100% gebe, bedeckt es den gesamten Raum am unteren Rand des Ansichtsfensters, aber es wird auch das Fußzeilen-Teil vom Bildschirm wegschieben. –

und Höhe: calc (100% - ... px); die ... px ist height header + footer – DanyCode

CSS Tabellen (keine echten Tabellen)

body { 
 
    margin: 0; 
 
} 
 
.parent { 
 
    height: 100vh; 
 
    display: table; 
 
    width: 100%; 
 
} 
 
header, 
 
footer { 
 
    max-height: 25vh; 
 
    display: table-row; 
 
    background: lightblue; 
 
} 
 
main { 
 
    height: 100%; 
 
    background: pink; 
 
    display: table-row; 
 
}

<div class="parent"> 
 
    <header> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea delectus quod, odit minus doloremque nesciunt voluptates veniam possimus voluptate sapiente provident, magnam sed, ipsam pariatur.</p> 
 
    </header> 
 
    <main> 
 
    <p>content</p> 
 
    </main> 
 
    <footer> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel sed eligendi quibusdam voluptatibus consequatur cum, velit illo. Aperiam similique laudantium praesentium veniam repellat consequuntur et!</p> 
 
    </footer> 
 
</div>

Support gut nach unten zumindest bis IE8.

Allerdings kann ich diese Lösung nicht empfehlen, aber angesichts der ungewöhnlichen Einschränkungen, die das OP damit hat, ist dies die einzige CSS-Lösung, die AFAIK.

Quelle

2016-04-25 19:18:11

Flexbox ist dafür gebaut. Support ist IE10 und höher, also nicht schlecht. –

Stretch (vertikal) Mitteldiv zwischen den beiden anderen

Antwort

Verwandte Themen