Как использовать flexbox для заполнения оставшейся высоты?

Question

html, 
 
body { 
 
    height: 100%; 
 
} 
 
.site-main { 
 
    height: calc(100% - 72px); 
 
    display: flex; 
 
} 
 
.site-main > div { 
 
    min-width: 85%; 
 
    height: 100%; 
 
} 
 
.site-main > aside { 
 
    min-width: 15%; 
 
    height: 100%; 
 
    background-color: $darkest-blue-grey; 
 
}

<header> 
 
    <h1>Title</h1> 
 
</header> 
 
<div class="site-main"> 
 
    <div></div> 
 
    <aside></aside> 
 
</div>

У меня есть header при фиксированном height из 72px.

Я дал .site-main div a width из 85%.

Я дал .site-main aside a width от 15%.

То, что я хочу, чтобы .site-main div и .site-main aside, чтобы быть бок о бок, и есть .site-main заполнить оставшееся пустое пространство после header.

И имеют .site-main div и .site-main aside заполнять .site-main высота.

Любая помощь была бы принята с благодарностью!

Answer 1

Вы можете использовать flex-direction: column на body и flex: 1 на site-main.

body { 
 
    display: flex; 
 
    flex-direction: column; 
 
    min-height: 100vh; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
header { 
 
    height: 75px; 
 
} 
 
.site-main { 
 
    display: flex; 
 
    flex: 1; 
 
} 
 
.site-main div { 
 
    flex: 0 0 85%; 
 
    background: lightblue; 
 
} 
 
aside { 
 
    flex: 0 0 15%; 
 
    background: lightgreen; 
 
}

<header> 
 
    <h1>Title</h1> 
 
</header> 
 
<div class="site-main"> 
 
    <div></div> 
 
    <aside></aside> 
 
</div>

Answer 2

Для вас, кто нуждается в поддержке IE11 (и 10), это один решает IE мин-высота ошибка

Примечание, чтобы это работало на IE10 , должны быть добавлены свойства префикса flexbox

html, body { 
 
    margin: 0; 
 
} 
 
body { 
 
    display: -ms-flexbox;  /* IE 10 */ 
 
    display: flex;    /* IE11/10 bug fix */ 
 
} 
 
.wrapper { 
 
    -ms-flex: 1;     /* IE 10 */ 
 
    flex: 1;      /* fill 100% width */ 
 
    display: -ms-flexbox;  /* IE 10 */ 
 
    display: flex; 
 
    -ms-flex-direction: column; /* IE 10 */ 
 
    flex-direction: column; 
 
    min-height: 100vh; 
 
} 
 
header { 
 
    height: 72px; 
 
} 
 
.site-main { 
 
    -ms-flex: 1;     /* IE 10 */ 
 
    flex: 1;      /* fill 100% height */ 
 
    display: -ms-flexbox;  /* IE 10 */ 
 
    display: flex; 
 
} 
 
.site-main > div { 
 
    width: 85%; 
 
    background-color: lightgreen; 
 
} 
 
.site-main > aside { 
 
    width: 15%; 
 
    background-color: lightblue; 
 
}

<div class="wrapper"> 
 
    <header> 
 
    <h1>Title</h1> 
 
    </header> 
 
    <div class="site-main"> 
 
    <div></div> 
 
    <aside></aside> 
 
    </div> 
 
</div>