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
1
Takie rozwiązanie znalazłem: https://medium.com/@beyondborders/beginner-css-grid-sticky-navigation-scrolling-content-7c4de0a8d1dc
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>