Jak sprawić by pasek menu był przyklejony do lewej strony i zajmował całą wysokość okna ?

pytanie zadane 24 września w HTML i CSS przez Kitan23 Nowicjusz (120 p.)

Jak sprawić by pasek menu był przyklejony do lewej strony i zajmował całą wysokość okna i nie nakładał się na tekst?

Poniżej przesyłam kod.

https://jsfiddle.net/kitan23/87yehzja/

komentarz 24 września przez distracted Użytkownik (540 p.)

polecam może użyć z-index oczywiście z pozycją odpowiednią (np fixed polecam ci + left: 0)

komentarz 24 września przez distracted Użytkownik (540 p.)

@Kitan23, dodatkowo może height 100% ?

komentarz 24 września przez Kitan23 Nowicjusz (120 p.)

@distracted, Dla id navbar jest już ustawione position:fixed; i left:0;

komentarz 24 września przez distracted Użytkownik (540 p.)

wybacz to było na takie szybko.

2 odpowiedzi

odpowiedź 24 września przez Panelinio Stary wyjadacz (10,210 p.)

Trzeba uporządkować trochę kod, więc zanotuj:

Zamień sobie header na tagi <h1> oprócz tego pierwszego. Niech on będzie na samym szczycie:

<body>
    <header>JS Documentation</header>
    <main id="main-doc">
      <nav id="navbar">
<!-- Lecisz z kodem dalej -->
</nav>
      <section class="main-section" id="introduction">
        <h1>Introduction</h1>

Ustal wysokość i overflow dla body, header ustawimy aby był "sticky". Będzie on na samym szczycie strony:

body {
  margin: 0;
  padding: 0;
  display: flex;
  height: 100vh;
  overflow: hidden;
}

header {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f4f4f4;
  font-size: 2em;
  height: 50px;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
}

Navbar ustawimy "ręcznie", aby był przyklejony do lewej strony i się nie ruszał. Czyli podobnie do headera:

#navbar {
  position: fixed;
  left: 0;
  top: 0;
  width: 300px;
  height: 100%;
  background-color: #f4f4f4;
  padding: 80px 0 0 20px;
  box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
  overflow-y: auto;

}

#navbar ul {
  list-style-type: none;
  padding: 0;
  font-size: 1.3rem;
  font-weight: 350;
  max-width: 65ch;
  text-wrap: balance;
}

#navbar li {
  margin-bottom: 10px;
}

#navbar a {
  text-decoration: none;
  color: black;
}

Został nam main, tutaj ustalimy jego szerokość matematycznie i na wszelki schowamy mu scrolla poziomego:

#main-doc {
  padding: 50px;
  overflow-y: auto;
  overflow-x: hidden;
  height: calc(100vh - 40px);
  margin-left: 300px;
  width: calc(100% - 300px);
  box-sizing: border-box;
}

I w zasadzie masz wszystko gotowe :D

A jeśli korzystasz z Visual Studio Code, pobierz sobie rozszerzenie Prettier. Moim zdaniem must have jesli chodzi o kodowanie - stylizuje Ci Twój kod aby był bardziej czytelny

komentarz 24 września przez Kitan23 Nowicjusz (120 p.)

Dzięki za podpowiedzi jutro sprawdzę twój kod.

odpowiedź 28 września przez VBService Ekspert (255,840 p.)
edycja 28 września przez VBService

Spróbuj może użyć flex tylko na <body>

[ pełny kod on-line ]

body {
  font-size: 1.1rem;
  line-height: 1.7;
  font-family: Arial, sans-serif;
  display: flex;
  flex-direction: row;
  height: 100vh;
  overflow: hidden;
}
main {
  width: 100%;
  padding: 20px;
  overflow-y: auto;
  margin-left: .5rem;
  margin-bottom: 1rem;
  scroll-behavior: smooth;
}
#navbar {
  width: 25vw;
  height: 100vh;
  position: sticky;
  top: 0;
  padding: .5rem;
  overflow-y: auto;
  overflow-x: hidden;
}

<body>
  <header>    
    <nav id="navbar">
      <h3>JS Documentation</h3>
      <ul>
        ... 
      </ul>
    </nav>
  </header>
  
  <main id="main-document" class="main-section">
    <section id="introduction">
      <h3>Introduction</h3>
        ...
    </sectipn>
    ...
  </main>
</body>