why 100% or 100vh height not occupying full page height

August 4, 2022

I was learning css pseudo-selector class ::before. I am confused how come 100% value given to height property of background-color not actually occupying full page height. I tried with viewport height also. Same issue. Below is my code:

* {
  margin: 0;
  padding: 0;
}

 :root {
  --navbar-height: 59px;
}

#navbar {
  display: flex;
  align-items: center;
  border: 2px solid red;
}

#navbar ul {
  display: flex;
}

#navbar::before {
  content: "";
  background-color: black;
  position: absolute;
  /* height being 100% or 100vh not occupying full page */
  height: 100vh;
  width: 100%;
  z-index: -1;
  opacity: 0.4;
}

#navbar ul li {
  list-style: none;
  font-size: 1.3rem;
}

#navbar ul li a {
  display: block;
  padding: 3px 22px;
  border-radius: 20px;
  text-decoration: none;
}

<nav id="navbar">
  <ul>
    <li class="item"><a href="#">home</a></li>
    <li class="item"><a href="#">services</a></li>
    <li class="item"><a href="#">contactus</a></li>
  </ul>
</nav>

output

what I expected was black background-color because have been given 100% height will occupy whole page. But it didn’t happen. Why is it so?

>Solution :

The issue is due to display: flex; on #navbar. Remove that and you should be fine. Another solution is wrapping the navbar in a parent div and adding :: before on it.