Header Height Not Expanding to the Size of Child Elements-CodePudding

My header element has no height. I have a navigation bar, like so:

nav {
  display: block;
}
.main_nav_bar {
  width: 100%;
  position: fixed;
  top: 0px;
  z-index: 3;
}
.drop-down-menu {
  float: right;
}
.drop-down-button {
  padding: 15px;
  font-size: 40px;
}
.drop-down-content {
  width: 100vw;
}
.drop-down-content a {
   text-align: center;
   font-size: 200%;
}

<!DOCTYPE html>
<html>
  <head>
    Extra Unimportant Stuff
  </head>
  <body>
    <header> Important
      <nav class = "main_nav_bar">
        <div class = "drop-down-menu" onclick = "openDropDownContent()">
          <button class = "drop-down-button"> <i class = "fa fa-bars fa-lg"></i> </button>
          <div class = "drop-down-content" id = "drop-down-content">
            <a href = "index.php"> Homepage </a>
            ⋮ Some other similar anchor tags.
          </div>
        </div>
      </nav>
    </header>
    <main>
      ⋮
      Extra Unimportant Stuff
    </main>
    <footer>
    </footer>
  </body>
</html>

Of course, the snippet doesn't work, since it is an outline. When I check the elements with the .main_nav_bar and class the .drop_down_menu class (as seen in the respective images), I see that they both have a height:

Main Navigation Bar has Defined Height Drop Down Menu Has Defined Height

But the header has no height? As seen in the image:

Header Has no Defined Height

Why is this the case? Why doesn't header change it's height to fit the child element? I tried overflow: auto but that didn't work.

CodePudding user response：

When an element has a position value other than static (default), it is out of the normal flow of the layout. Meaning it's behavior and the behavior of it's ancestors, descendants, and siblings are very different. See this article on position and of course MDN

Make your <header> fixed not the <nav>

header {
  position: fixed;
  top: 0;
  z-index: 3;
  outline: 5px dashed red;
}

Remove position, top, and z-index from <nav>

header {
  position: fixed;
  top: 0;
  outline: 5px dashed red;
}

nav {
  display: block;
}

.main_nav_bar {
  width: 100%;
}

.drop-down-menu {
  float: right;
}

.drop-down-button {
  padding: 15px;
  font-size: 40px;
}

.drop-down-content {
  width: 100vw;
}

.drop-down-content a {
  text-align: center;
  font-size: 200%;
}

<!DOCTYPE html>
<html>

<head>
  Extra Unimportant Stuff
</head>

<body>
  <header> Important
    <nav >
      <div  onclick="openDropDownContent()">
        <button > <i class = "fa fa-bars fa-lg"></i> </button>
        <div  id="drop-down-content">
          <a href="index.php"> Homepage </a> ⋮ Some other similar anchor tags.
        </div>
      </div>
    </nav>
  </header>
  <main>
    ⋮ Extra Unimportant Stuff
  </main>
  <footer>
  </footer>
</body>

</html>