標題高度未擴展到子元素的大小-有解無憂

我的標題元素沒有高度。我有一個導航欄，如下所示：

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>

當然，該片段不起作用，因為它是一個大綱。當我使用 .main_nav_bar 檢查元素并將 .drop_down_menu 類分類（如各自影像中所示）時，我看到它們都有一個高度：

主導航欄已定義高度下拉選單已定義高度

但是標題沒有高度？如圖所示：

標題沒有定義的高度

為什么會這樣？為什么標題不改變它的高度以適應子元素？我試過overflow: auto了，但沒有用。

uj5u.com熱心網友回復：

當一個元素的position值不是static（默認）時，它就超出了布局的正常流程。這意味著它的行為與它的祖先、后代和兄弟姐妹的行為非常不同。見這篇關于職位的文章，當然還有MDN

讓你的<header>固定不是<nav>

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

洗掉position, ,top和z-index<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 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>

轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/477750.html

標籤：css

上一篇：是否可以將元素的高度設為其容器寬度的100%？[復制]

下一篇：為什么我的元素有一個滾動條，即使它適合它的容器？