Flexbox тело и миним высота

https://jsfiddle.net/vz7cLmxy/Flexbox тело и миним высота

Я пытаюсь иметь тело, чтобы расширить, но мин-высота не работает. Я читал другие связанные темы, но не могу обойти его.

HTML внутри тела

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

Ожидаемый результат в том, что основным является натянута, чтобы заполнить высоту, если это меньше, чем 100%.

источник

2016-05-25 Jens Törnell

выглядит очень похожи друг на друга: http://stackoverflow.com/questions/25098042/fill-remaining-vertical-space-with- css-using-displayflex/25098486 –

Использование flex: 1 на центрированного элемента:

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

источник

2016-05-25 08:26:33 Randy

Спасибо! Комбинация с настройкой flex: 1 на .wrap (в моем случае) и с шириной: 100% на html (вместо min-height) сделала трюк! –

Не работает с IE11 ... – ssougnez

Flexbox тело и миним высота

ответ

Смежные вопросы