Flexbox Körper und Haupt-min-height

https://jsfiddle.net/vz7cLmxy/Flexbox Körper und Haupt-min-height

Ich versuche, den Körper zu haben zu erweitern, aber die min-height nicht funktioniert. Ich habe andere verwandte Themen gelesen, kann mich aber nicht darum kümmern.

HTML innerhalb des Körpers

<div class="menu">Menu</div> 

<div class="wrap"> 
    <div class="sidebar">Sidebar</div> 
    <div class="main">Main</div> 
</div> 

<div class="footer">Footer</div>

CSS

body, 
html { 
    padding: 0; 
    margin: 0; 
    min-height: 100%; 
} 

body { 
    display: flex; 
    background: #eee; 
    flex-direction: column; 
} 

.menu { 
    background: red; 
    color: #fff; 
    padding: 10px; 
} 
.wrap { 
    display: flex; 
} 
.sidebar { 
    background: #ddd; 
    width: 300px; 
} 
.main { 
    background: #ccc; 
    flex: 1; 
} 
.footer { 
    background: #000; 
    color: #fff; 
    padding: 10px; 
}

Erwartetes Ergebnis ist, dass Haupt streched wird, um die Höhe zu füllen, wenn sie als 100% weniger ist.

Quelle

2016-05-25 Jens Törnell

sehr ähnlich sieht: http://stackoverflow.com/questions/25098042/fill-remaining-vertical-space-with- css-using-displayflex/25098486 –

Verwenden flex: 1 auf dem zentrierten Element:

.Site { 
 
    display: flex; 
 
    min-height: 100vh; 
 
    flex-direction: column; 
 
} 
 

 
.Site-content { 
 
    flex: 1; 
 
    background-color:#bbb; 
 
}

<body class="Site"> 
 
    <header>This is the header text ☺</header> 
 
    <main class="Site-content">…</main> 
 
    <footer>This is the footer text ☻</footer> 
 
</body>

Quelle

2016-05-25 08:26:33 Randy

Danke! Eine Kombination mit der Einstellung flex: 1 on .wrap (in meinem Fall) und mit der Breite: 100% auf html (statt min-height) hat den Trick gemacht! –

Funktioniert nicht mit IE11 ... – ssougnez

Flexbox Körper und Haupt-min-height

Antwort

Verwandte Themen