Having Nav Bar display the full height of the page

Tell us what’s happening:

When I am attempting to have the blue sidebar (#navbar) extend to the bottom of the page, despite trying height: 100% and height: 100vh, neither of these extend the bar to the bottom of the page. If I use an arbitrary value of height: 150% it gets close, but I feel like there’s an error I’m not catching. I tried googling, but haven’t been able to fix the problem.

Your code so far

<!DOCTYPE html>
    <link rel="stylesheet" type="text/css" href="styles.css">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title id="title">Technical Documentation</title>
        <nav id="navbar">
          <ul id="sidelist">
            <li ><a class="nav-link" href="#Why_Mac_and_Cheese">Why Mac and Cheese</a></li>
           <li><a class="nav-link" href="#Ingredients">Ingredients</a></li>
          <li ><a class="nav-link" href="#How_to_Cook">How to Cook</a></li>
          <li ><a class="nav-link" href="#Serving_Suggestions">Serving Suggestions</a></li>
          <li ><a class="nav-link" href="#Tips">Tips</a></li></ul>
        <main id="main-doc">
        <h1>How to Make Macaroni and Cheese</h1>
        <section class="main-section" id="Why_Mac_and_Cheese">
        <header>Why Mac and Cheese</header>
        <p>I once ate mac and cheese at a wedding and it was so delicious!</p>
        <p>Also, mac and cheese is one of the easiest dishes to make!</p>
        <p>Lastly, it is very filling and enjoyable to eat.</p>
        <code>This is nothing</code>
        <section class="main-section" id="Ingredients">
          <li>Macaroni Noodles</li>
          <li>Butter or Margarine</li>
          <li>Green Onions</li>
          <code>This is nothing</code>
        <section class="main-section" id="How_to_Cook">
        <header>How to Cook</header>
          <p>Bring water to a rolling boil in an 6 quart pot. Once the water is boiling, add the macaroni noodles. Wait 8-10 minutes until done. Drain the water off of the noodles.</p>
          <p>Add desired amount of butter, cheese, and a small amount of milk to the noodles. Return the noddles to heat to melt the cheese while stirring throughout.<p>
          <p>Add green onions and cooked bacon to taste</p>
          <code>This is nothing</code>
          <section class="main-section" id="Serving_Suggestions">
          <header>Serving Suggestions</header>
          <p>Macaroni and cheese is good on its own or as part of a spread with green beans, mashed potatoes, and a protein.</p>
          <code>This is nothing</code>
          <section class="main-section" id="Tips">
            <p>You can add broccoli to macaroni and cheese to trick your kids into eating vegetables.</p>
            <p>When in doubt, add more bacon!</p>
            <code>This is nothing</code>

* {
  box-sizing: border-box;

html, body {
  height: 100%;
  width: 100%;

#navbar {
  width: 200px;
  height: 100%;
  background-color: #000055;
  color: white;
  position: relative;
  display: block;
  font-family: Sans-Serif;
  font-size: 20px;

#sidelist {
  padding-top: 70px

.nav-link {
  margin: 15px auto;

a {
  text-decoration: none;
  color: white;

a:hover {
  color: red;

main {
  position: absolute;
  top: 20px;
  left: 230px;

@media (max-width:768px)
 { * {
   color: blue;


Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/101.0.4951.54 Safari/537.36

Challenge: Build a Technical Documentation Page

Link to the challenge:

Hi @sharpe.kyle

Are you sure the problem is your NAV and not you parent’s NAV?
Check about reset browser’s features related with body, for instance.
I cannot see the problem .
You can use background-color in your elements or outline: 2px solid pink; to hightlight your elements to help you understand what is going on.
I also use Browser’s Inspector.
I hope that helps, happy coding and good luck :ok_hand: :muscle:

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.