文章/答案/技术大牛

发布

社区首页 >问答首页 >页眉高度不扩展到子元素的大小

问页眉高度不扩展到子元素的大小
EN

Stack Overflow用户

提问于 2022-05-18 17:20:05

回答 1查看 115关注 0票数 1

我的标题元素没有高度。我有一个导航条，就像这样：

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，但那不起作用。

css

回答 1

Stack Overflow用户

回答已采纳

发布于 2022-05-18 17:28:32

当元素的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>

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/72293464

复制

相似问题

问页眉高度不扩展到子元素的大小
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问页眉高度不扩展到子元素的大小EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问页眉高度不扩展到子元素的大小
EN