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>
<html>
<head>
<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>
</head>
<body>
<nav id="navbar">
<header>Navigation</header>
<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>
</nav>
<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>
<section class="main-section" id="Ingredients">
<header>Ingredients</header>
<ol>
<li>Macaroni Noodles</li>
<li>Butter or Margarine</li>
<li>Cheese</li>
<li>Milk</li>
<li>Bacon</li>
<li>Green Onions</li>
</ol>
<code>This is nothing</code>
</section>
<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>
<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>
<section class="main-section" id="Tips">
<header>Tips</header>
<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>
</section>
</main>
</body>
</html>
* {
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:
