muestra head+contenido sentido columna

css flex sample

header{
  height: 10vh;
  background: grey;

  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}
section{
  display: flex;
  flex-flow: column wrap;
  min-height: 100vh;
}
section:nth-child(1){
  margin-top:10.5vh;
}
section:nth-child(even){
  background:red;
}
section:nth-child(odd){
  background:blue;
}
section.hztal{
  flex-direction: row;
}
section.hztal div{
  flex-grow: 3;
  background: rgba(0,0,0,0.5);
}
section.hztal aside{
  height:100vh;
  flex-grow: 1;
  background: rgba(255,255,255,0.5);
}