Wie benutze ich flexbox um die restliche Höhe zu füllen?

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>

Ich habe die header zu einem festen height von 72px.

Ich habe .site-main div eine width von 85% gegeben.

Ich habe .site-main aside eine width von 15% gegeben.

Was ich will, ist für .site-main div und .site-main aside nebeneinander zu sein, und haben .site-main den verbleibenden weißen Raum nach dem header füllen.

Und haben .site-main div und .site-main aside füllen .site-main Höhe.

Jede Hilfe würde sehr geschätzt werden!

Answer 1

Sie können flex-direction: column unter body und flex: 1 unter site-main verwenden.

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

Für Sie, die IE11 unterstützen müssen (und 10), löst dieser den IE min-height Fehler

Hinweis, dies auf IE10 arbeiten , vorangestellte Flexbox-Eigenschaften müssen hinzugefügt werden

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>