Problémáim vannak az oldalelrendezéssel a flexboxon, és kíváncsi vagyok, tud-e valaki segíteni! Az alábbi kódot egy JSFiddle-ben találom itt: https://jsfiddle.net/smvrn7to/1/
Megpróbálom elérni, hogy a „notheader” azonosítójú div a képernyő aljáig nyúljon, de nincs szerencsém. Ha jól értem, ha a align-content:stretch-t használom a "notheader" divnél, akkor működnie kell, de nem kapok semmit.
Megpróbáltam a magasságot is 100%-ra állítani, de ez sem változott.
body{
background-color: blueviolet;
margin: 0px;
padding: 0px;
display: flex;
align-content: stretch;
height: 100%;
}
html{
height: 100%;
}
nav{
background-color: aqua;
width: 80px;
height: 100%;
}
main{
background: yellow;
width: 100%
}
header{
height: 100px;
background-color: teal;
}
#controls{
background: tomato;
}
#notnav{
width: 100%;
background-color: chartreuse;
display: flex;
flex-direction: column;
height: 100%;
}
#notheader{
background: white;
}<nav>
<p>Nav Bar</p>
</nav>
<div id="notnav">
<header>Header</header>
<div id="notheader">not header</div>
<!-- <div id="controls">controls</div> -->
</div>
