Header Height Not Expanding to the Size of Child Elements

Question

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%;
}



  
    Extra Unimportant Stuff
  
  
     Important
      
        
          
          
             Homepage 
            ⋮ Some other similar anchor tags.
          
        
      
    
    
      ⋮
      Extra Unimportant Stuff

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.

user_2813224 · Answer

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

fixed not the

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

Remove position, top, and z-index from

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%;
}





  Extra Unimportant Stuff



   Important
    
      
        
        
           Homepage  ⋮ Some other similar anchor tags.
        
      
    
  
  
    ⋮ Extra Unimportant Stuff

Header Height Not Expanding to the Size of Child Elements

1 Answers