Flexbox corpo e principale min-height

https://jsfiddle.net/vz7cLmxy/Flexbox corpo e principale min-height

Sto cercando di avere il corpo di espandere, ma il min-height non funziona. Ho letto altri argomenti correlati ma non riesco a capirlo.

HTML all'interno del corpo

<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; 
}

risultato atteso è che principale è streched per riempire l'altezza se è inferiore al 100%.

fonte

2016-05-25 Jens Törnell

sembra molto simili: http://stackoverflow.com/questions/25098042/fill-remaining-vertical-space-with- css-using-displayflex/25098486 –

Usa flex: 1 sull'elemento centrato:

.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>

fonte

2016-05-25 08:26:33 Randy

Grazie! Una combinazione con impostazione flex: 1 su .wrap (nel mio caso) e larghezza: 100% su html (invece di altezza minima) ha fatto il trucco! –

Non funziona con IE11 ... – ssougnez

Flexbox corpo e principale min-height

risposta

Problemi correlati