grid a position fixed dla menu

0

Zacząłem tworzyć stronę, która ma taki układ: na górze header, po lewej menu, reszta treść. Chcę, żeby podczas przewijania treści menu oraz header były cały czas widoczne. Zacząłem kombinować z gridem oraz ustawiłem position:fixed dla headera oraz menu. Nie działa, już doczytałem dlaczego. Pytanie czy w tym układzie jest sens robić grid? Strona tworzona jest na konkretną rozdzielczość.

0

Czyli mam stronę, gdzie 2 elementy są stałe (header, menu) i 1 element jest zmienny tj. okienko z treścią. Pytanie co lepsze:
a) dla każdej pozycji menu robić kopię całego układu i zmieniać treść tego okienka
b) użyć elementu iframe

1
<!DOCTYPE html>
<html><head>
  <meta charset="UTF-8">
  <title>tyul</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">

<style>
/* --- inicjacja --- */
* {
  box-sizing:border-box;
  margin:0px;
  padding:0px;
}
/* --- /inicjacja --- */

MAIN {
  margin-top:40px;
  margin-left:200px;
  min-height:calc(100vh - 40px);
  padding:20px;
  background-color:#F5F5F5;
}

NAV {
  position:fixed;
  top:40px;
  left:0px;
  width:200px;  
  height:calc(100vh - 40px);
  max-height:calc(100vh - 40px);
  padding:0px;
  overflow-y:auto;  
  background-color:#333333;
  color:white;
}

HEADER {
  position:fixed;
  /* display */
  display:-ms-flex;              /* IE 10 */
  display:-webkit-box-flex;      /* iOS 6-, Safari 3.1-6 */
  display:-webkit-flex;          /* Chrome, Safari 6.1+ */  
  display:flex;
  /* /display */
  /* wyrównaj w pionie */
  -ms-flex-align:center;
  -webkit-align-items:center;
  -webkit-box-align:center;
  align-items:center;
  /* /wyrównaj w pionie */
  top:0px;
  left:0px;
  width:100%;
  height:40px;  
  max-width:100%;
  border-bottom:1px solid #5C5C5C;
  color:white;
  background-color:#333333;    
}
</style>

</head>
<body cz-shortcut-listen="true" _adv_already_used="true">

<main>
  treść
  a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>
  a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>
  a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>
</main>

<nav>menu lewe</nav>
<header>nagłówek</header>
</body>
</html>

1 użytkowników online, w tym zalogowanych: 0, gości: 1, botów: 0