Aiuto nella programmazione, risposte alle domande / html / La flexbox può riempire l'intero schermo senza accedere al "corpo"? - html, css, flexbox

La flexbox può riempire l'intero schermo senza accedere al "corpo"? - html, css, flexbox

Nella mia situazione non sono in grado di applicare il flex altag del corpo. Posso ottenere lo stesso effetto (intestazione / piè di pagina appiccicosi con la flexbox occupando tutto lo schermo) senza applicare CSS al tag del corpo. Ecco il codice pertinente. Ho commentato il corpo css che raggiunge l'effetto che voglio.

Grazie, opaco

/*html {
height: 100%;
}
body {
min-height: 100%;
display: flex;
flex-direction: column;
}
*/
.flex-body {
min-height: 100%;
display: flex;
flex-direction:column;
}



.main {
display: flex;
flex: 1 0 auto;
}

.nav {
flex: 0 0 12em;
}

.content {
flex: 1 0 auto;
display: flex;
flex-direction: column;
}

.row {
display: flex;
flex: 1 0 auto;
flex-direction: row;

}
.col {
flex: 1 0 auto;
}

/* TEMP CODE FOR THIS TEST, REMOVE FOR ACTUAL USE
*/
body {
text-align: center;
}

*{
box-shadow:inset 0px 0px 0px 1px #f00;
}

<div class="flex-body">
<header class="header">
<section class="content">
<div class="row">
<div class="col">
Upper Left
</div>
<div class="col">
Upper Middle
</div>
<div class="col">
Upper Right
</div>
</div>

</section>
</header>
<main class="main">
<nav class="nav">
Nav
</nav>
<section class="content">
<div class="row">
<div class="col">
Upper Left
</div>
<div class="col">
Upper Middle
</div>
<div class="col">
Upper Right
</div>
</div>
<div class="row">
Middle
</div>
<div class="row">
Lower
</div>
</section>
</main>
<footer class="footer">Footer</footer>
</div>

risposte:

0 per risposta № 1

Aggiungi un'altezza minima di 100 vh al contenitore flessibile:

.flex-body {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: flex;
flex-direction: column;
min-height: 100vh;
}

Quindi sarà alto almeno quanto il viewport del browser (ma sarà possibile ingrandirlo se necessario).

0 per risposta № 2

puoi anche imbricare il flex boxe e usare le scorciatoie flex per riempire l'altezza o la larghezza di un genitore. Ma questo significa includere HTML e corpo .

In questo modo devi affrontare altezza / larghezza e margini / paddings. Il browser si occuperà di esso stesso.

html {
height: 100%;
display: flex;
flex-direction: column;
}

body,
.flex-body {
display: flex;
flex: 1;/* no need anymore to deal with height/width */
flex-direction: column;
}

.main {
display: flex;
flex: 1;
/* mind this */
/*overflow:auto; */ /* can come handy here if you want to keep footer in view */
}

.nav {
flex: 0 0 12em;
}

.content {
flex: 1 0 auto;
display: flex;
flex-direction: column;
}

.row {
display: flex;
flex: 1 0 auto;
flex-direction: row;
}

.col {
flex: 1 0 auto;
}


/* TEMP CODE FOR THIS TEST, REMOVE FOR ACTUAL USE
*/

body {
text-align: center;
}

* {
box-shadow: inset 0px 0px 0px 1px #f00;
}

<div class="flex-body">
<header class="header">
<section class="content">
<div class="row">
<div class="col">
Upper Left
</div>
<div class="col">
Upper Middle
</div>
<div class="col">
Upper Right
</div>
</div>

</section>
</header>
<main class="main">
<nav class="nav">
Nav
</nav>
<section class="content">
<div class="row">
<div class="col">
Upper Left
</div>
<div class="col">
Upper Middle
</div>
<div class="col">
Upper Right
</div>
</div>
<div class="row">
Middle
</div>
<div class="row">
Lower
</div>
</section>
</main>
<footer class="footer">Footer</footer>
</div>